HTML5实现自定义音视频播放器
目录
HTML5实现自定义音视频播放器
相关资源：
目的：
通过综合性实验的设计，使学生综合训练自己的需求分析、系统设计、编程、测试等各种能力，积累软件开发的经验，提高学生进行软件开发所需具备的专业素质以及团队协作能力。
要求：
1.编写一个音视频播放器，实现流畅的播放音频、视频；包括添加多个播放文件、播放、暂停、控制进度，播放列表，自定义添加歌词等功能；
3.实现友好的UI设计，增强用户体验；
该实验在HTML5中调用了Audio标签与Video标签对视频与音乐进行的设计
效果图为：
音乐播放器：
视频页面：
文件类型：
视频文件类型为MP4文件；
音乐文件类型为MP3文件。
模块描述
视频模块：
1)功能：用户选择视频文件并播放，也可以跳转到音乐播放器页面。
2)接口：用户可以通过点击音乐按钮跳转到音乐页面。
音乐模块：
1)功能：用户选择音乐文件并播放，也可以跳转到视频播放器页面。
2)接口：用户可以通过点击视频按钮跳转到音乐页面。
关键代码：
视频播放器HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>视频播放器</title>
<!--连接css文件-->
<link rel="stylesheet" href="Video.css"/>
</head>
<body>
<div class="view">
<div class="left-side"><!-- 创建左边列表-->
<div class="control">
<div class="o-btns"><!--控制按钮-->
<a href="FileAudio.html"><button id="audio">切换音频</button></a>
<button class="add-video">本地视频</button>
<input type="file" class="video-file" id="file" accept="video/mp4"
multiple="true"/>
</div>
</div>
<!--创建视频列表-->
<div class="video-contain">
<ul class="video-list"></ul>
</div>
</div>
<!--创建视频控制控件-->
<video preload="auto" style="width: 960px;height: 660px; margin-left: 450px;margin-top:50px" controls="controls" ></video>
</div>
<!--连接js文件-->
<script src="jquery-3.6.0.min.js"></script>
<script src="video_main.js"></script>
</body>
</html>音乐播放器的HTML文件：Audio.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>音乐播放器</title>
<!--连接css文件-->
<link rel="stylesheet" href="Audio_style.css"/>
</head>
<body>
<div class="view">
<div class="left-side"><!-- 创建左边列表-->
<div class="control">
<div class="o-btns"><!--控制按钮-->
<a href="FileVideo.html"><button id="shift-video">切换视频</button></a>
<button class="add-audio">本地音乐</button>
<input type="file" class="audio-file" id="file" accept="audio/mp3" multiple="true"/>
<button class="add-audio-lyric" id="fileImport">本地歌词</button>
<input type="file" class="audio-lyric-file" id="files" multiple="true"
accept="/lrc" onchange="fileImport();"/>
</div>
</div>
<!--创建音乐列表-->
<div class="audio-contain">
<ul class="audio-list"></ul>
</div>
</div>
<!--创建音乐控制控件-->
<audio preload="auto" style="width: 960px;height: 50px; margin-left: 450px;margin-top:50px；controls onpause="pauseFunction() onPlay="playFunction()"
></audio>
<li></li>
</div>
<!--创建右侧区域显示唱片-->
<div class="cas" id="stage" width="825" height="540">
<div class="bg"></div>
<img id="needle" class="play-needle pause-needle" src="play_needle.png"/>
<div class="disk-cover disk-cover-animation">
<img src="placeholder_disk_play_song.png" width="150" class="album"/>
<img src="play_disc.png" width="200" class="disk-border"/>
</div>
</div>
<!--连接js文件-->
<script src="jquery-3.6.0.min.js"></script>
<script src="Audio_main.js"></script>
</body>以上为本次音视频播放器的 HTML 部分代码。