版权声明：转载声明原作者及链接 https://blog.csdn.net/ICY___/article/details/87889594
自从H5进宫以来，flash一直被冷落以至于要停止维护。可见，H5还是有很大的优势的，在播放器上，H5自带的播放器已经很强大了，今天将要重写H5播放器（虽然好丑）
放在前面的总结：谷歌浏览器表现的差强人意，本地视频上无法实现进度条的操作，火狐可以，至少我没有找到解决办法，远程视频没有问题，有好多video属性之前听都没听说过，只能神农尝百草，还是比较头疼的，代码不算很多，毕竟是经常在用的东西，所以思想也不是很复杂，但小bug不断。
实现效果：
代码如下，注释已写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>video</title>
<style>
#video{
width: 700px;
height: 500px;
margin: 0 auto;
border: 1px solid red;
}
#mp4player{
position: relative;
width: 500px;
height: 500px;
background-color: black;
float: left;
overflow: hidden;
}
#mp4{
position: relative;
width: 500px;
height: 500px;
}
#mp4list{
width: 200px;
height: 500px;
float: left;
border: 1px solid silver;
box-sizing: border-box;
background-color: black;
}
#content{
position: absolute;
width: 500px;
height: 90px;
bottom: -90px;
z-index: 10;
background-color: rebeccapurple;
transition: all 0.3s ease-in;
}
#mp4player:hover #content{
bottom: 0;
}
#btntime{
width: 500px;
}
#btnsound{
position: relative;
top: 5px;
}
</style>
</head>
<body>
<div id="video">
<div id="mp4player">
<video src=".././../../前端上课/0219/MP4/high.mp4" id="mp4"></video>
<div id="content">
<input type="range" id="btntime" value="0" max="100" /><br />
<button id="start">播放</button>
<button id="btngo">快进</button>
<button id="btnback">快退</button>
<button id="nosound">静音</button>
<input type="range" id="btnsound" value="0" max="100" />
<button id="all_screen">全屏</button>
</div>
</div>
<div id="mp4list"></div>
</div>
<script>//获取dom元素
var start = document.getElementById('start');
var video = document.getElementById('mp4');
var btntime = document.getElementById('btntime');
var btngo = document.getElementById('btngo');
var btnback = document.getElementById('btnback');
var nosound = document.getElementById('nosound');
var btnsound = document.getElementById('btnsound');
var all_screen = document.getElementById('all_screen');
var time;
video.onplaying = function () {
//视频开始回放的时候开始执行
//总时间
var allTime = this.duration;
btntime.setAttribute("max", allTime);//赋值给max
}
// 视频播放位置发生变化时执行
video.ontimeupdate = function () {
btntime.value = this.currentTime;
}
//
// video.onprogress = function (e) {
// }js好像无法直接实现下载事件
// 进度条事件（点击时首先暂停播放，点击后移动时进度条改变，视频时间改变）
btntime.addEventListener('mousedown', function () {
video.pause();
this.onmousemove = function () {
video.currentTime = this.value;
}
this.onmouseup = function () {
video.play();//鼠标抬起时，开始播放，清除事件
this.onmousemove = null;
this.onmouseup = null;
}
});
// 播放按钮事件
start.addEventListener('click', function () {
if (this.innerHTML == '播放') {
video.play();
this.innerHTML = '暂停';
} else {
video.pause();
this.innerHTML = '播放';
}
});
// 快进
btngo.addEventListener('click', function () {
start.innerHTML = '播放';
video.pause();
time = setInterval(function () {
video.currentTime += 5;
}, 1000)
});
// 快退
btnback.addEventListener('click', function () {
start.innerHTML = '播放';
video.pause();
time = setInterval(function () {
video.currentTime -= 5;
if (video.currentTime <= 0) {//如果已经退到开头，开始播放
video.play();
clearInterval(time)
}
}, 1000)
});
// 静音
nosound.addEventListener('click', function () {
video.muted = !video.muted;
});
// 全屏
all_screen.addEventListener('click', function () {
// 兼容性写法
if (video.webkitRequestFullScreen) {
video.webkitRequestFullScreen();
}
if (video.mozkitRequestFullScreen) {
video.mozRequestFullScreen();
}
if (video.mskitRequestFullScreen) {
video.mozRequestFullScreen();
}
if (video.kitRequestFullScreen) {
video.RequestFullScreen();
}
});
// 音量调节
btnsound.addEventListener('mousedown', function () {
this.onmousemove = function () {
video.volume = this.value / 100;
}
this.onmouseup = function () {
this.onmousemove = null;
this.onmouseup = null;
}
});
</script>
</body>
</html>后面的总结：这只是一个学习的案例，离真正的播放器还差的很远，比如：广告，视频的单击暂停显示广告，双击全屏（成双成对），加载条，分辨率切换，网速显示，弹幕，下载，播放列表等等