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

相关资源：点击跳转到资源下载
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部分代码。

HTML5实现自定义音视频播放器相关推荐

Linux系统的madplay、mplayer音视频播放器的制作
Linux系统音视频播放器的制作 madplay和mplayer的安装环境一.Linux系统录音播放源码的下载和移植 1.需要下载alsa-lib-1.2.6.tar.bz2(声音驱动的内核组件库) ...
android音视频播放器开发百度云,Android 播放端 SDK
1 概述 PLDroidPlayer 是一个适用于 Android 平台的音视频播放器 SDK,可高度定制化和二次开发,为 Android 开发者提供了简单.快捷的接口,帮助开发者在 Android ...
基于electron的音视频播放器
基于electron的音视频播放器前言选择做一个音视频播放器桌面应用程序原因技术的选型已经实现了的功能音视频播放实现右键菜单实现总结效果图安装包下载: 最后如果大家觉得我这个音视频播 ...
使用Qt编写的跨平台音视频播放器（一）
1.初衷为了学习Qt,遂自己琢磨着写一个音视频播放器(比较五花八门,借鉴模仿了好几个软件的界面),可以有很多种实现方式,在这里我使用的是QMediaPlayer,和QVideoWidget显示.有时 ...
德声科技代理M-Live音视频播放器
M-live于1987年在里米尼成立,30年来一直是意大利MIDI领域(软件和播放器)的领导者,音乐家.音响工程师和IT专家构成了其工作团队的核心. M-Live生产的乐器消除了个人与音乐体验之间的所 ...
开源安卓Android流媒体音视频播放器实现声音自动停止、恢复、一键静音功能源码
本文转自EasyDarwin团队John的博客:http://blog.csdn.net/jyt0551/article/details/60802145 我们在开发安卓Android流媒体音视频播放 ...
QT + FFmpeg 5.x + x264 + x265 + SDL2 音视频播放器
QT + FFmpeg 5.x + x264 + x265 + SDL2 音视频播放器使用了QT的QML设计界面,人机交互; 使用了FFmpeg 5.x + x264 + x265 + SDL2 完 ...
基于Qt、FFMpeg的音视频播放器设计一
前言:整个项目的源代码 https://download.csdn.net/download/hfuu1504011020/10672140 最近刚完成基于Qt.FFMpeg的音视频播放器相关C++程 ...
Qt FFmpeg 音视频播放器
使用FFmpeg库实现本地和rtp 音视频播放器,使用qt绘制视频. 本demo环境为 qt5.12 vs2019-32位 .pro的qt工程 FFmpeg版本位3.4.8 vs2092-32位本 ...

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

HTML5实现自定义音视频播放器相关推荐

最新文章

热门文章