HTML5实现自定义音视频播放器

最新推荐文章于 2024-04-18 06:45:00 发布

小二康

最新推荐文章于 2024-04-18 06:45:00 发布

阅读量1.4k

点赞数 2

文章标签： html5 javascript css html

本文链接：https://blog.csdn.net/weixin_45632016/article/details/118888242

版权

相关资源：点击跳转到资源下载
https://download.csdn.net/download/weixin_45632016/20363517
目的：
通过综合性实验的设计，使学生综合训练自己的需求分析、系统设计、编程、测试等各种能力，积累软件开发的经验，提高学生进行软件开发所需具备的专业素质以及团队协作能力。
要求：
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部分代码。

小二康

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5实现自定义音视频播放器

目的：通过综合性实验的设计，使学生综合训练自己的需求分析、系统设计、编程、测试等各种能力，积累软件开发的经验，提高学生进行软件开发所需具备的专业素质以及团队协作能力。要求：1.编写一个音视频播放器，可以是网页版，也可以是电脑客户端版，实现流畅的播放音频、视频；2.实现播放器控制基本功能，包括添加播放文件、播放、暂停、控制进度等功能；3.实现友好的UI设计，增强用户体验；该实验在HTML5中调用了Audio标签与Video标签对视频与音乐进行的设计效果图为：音乐播放器：视频页面：文件类
复制链接

扫一扫