从0到1，纯手工打造一款html5视屏播放器
先看图，成品大概就是这样子，很简陋的一个播放器，控制播放，进度条，音量，播放时间这么几个按钮。图标网上找的，大小颜色都不一样(尴尬)
- 先做出一个基本的界面出来，界面包括播放视屏界面还有下面的控制面板界面
面板包括最基本的组件，一次是播放/暂停按钮、进度条、时间、音量、全屏，当然还可以包括其他元素，比如分享，下载弹幕什么的。这里用的html5元素主要是`video`和`source`，video是视屏播放的界面，source是资源，video里面可以有多个source资源，浏览器会略过不支持的格式。
```html
<div id="videoPlay">
<div id="screen">
<video id="video">
<source src="https://media.w3.org/2010/05/sintel/trailer.mp4" id="videoURL">
Your browser does not support the <code>video</code> element.
</video>
<div id="film"></div>
</div>
<div id="panel">
<div class="button" id="play"></div>
<input type="range" value="0" min="0" max="1000" id="progress" disabled="disabled" />
<div class="button" id="fullScreen"><img src="public/resize.png" /></div>
<div class="button" id="sound">
<img src="public/sound.png" />
</div>
<div id="time">00:00:00/00:00:00</div>
<input type="range" value="8" min="0" max="10" step="1" id="volume" />
</div>
</div>
```
- video的事件和属性，这里就说一下会用到的
**事件**
* `oncanplay`:视频加载完成可以播放时（没有全部加载完成）触发，第一次打开页面开始加载或者修改`currentTime`会触发事件
* `onended`:这个比较简单，就是视频播放结束的时候触发，可以用来控制播放下一个
* `ontimeupdate`:播放时触发，用来更新时间的
* `onwaiting`:视频加载时触发，用来控制loading图标的。
**属性**
* `paused`是否暂停。true表示暂停，false播放中。
* `videoWidth`/`videoHeight`:视频宽度高度，在视频信息还没加载完成前都为0
* `currentSrc`:资源地址
* `duration`:总时长
* `currentTime`:当前播放的时间
* `volume`:音量，范围0-1
可以参考w3给出的例子
![w3_video.png][2]
- 关于音量部分的实现
html5的input标签新增的几个类型，其中包括一个range，效果如下
<input type="range" value="50" min="0" max="100" step="1" style="width:100%;"/>
可以通过这个标签滚动，监听onchange事件来控制音量和进度，音量竖起来的话，用css3的旋转属性，反向旋转90°（顺手）。但是这样子还不够，还需要通过滚轮控制音量，通过谷歌发现，chrome与firefox监听滚轮事件是不同的，firefox监听DOMMouseScroll事件，这是火狐家自己的事件，别人没有，chrome监听mousewheel事件，测试包括edge也支持，opera采用webkit，还有国内的浏览器也基本采用webkit，也都支持。
具体代码如下：
var volume=document.getElementById("volume");
volume.addEventListener("mousewheel", function(event){
volume.value = Number(volume.value) + (event.wheelDelta/120);
volume.onchange();
})
// 火狐浏览器兼容
volume.addEventListener("DOMMouseScroll", function(event){
volume.value = Number(volume.value) -(event.detail/3);
volume.onchange();
})
注意的是chrome通过event.wheelDelta获取滚动值，滚动值是120的倍数，正负代表方向，貌似而且和firefox相反，firefox是通过event.detail获取，数值是3的倍数，测试过程中发现都是滚动一小格触发一次事件（慢慢感受一下滚轮，可以感受到卡顿），基本都是+-3、+-120这样子，直接修改volume.value并不会触发volume.onchange事件，要手动触发，还有volume有上限和下限，因此不用担心改过头了。同理，可以用来控制播放进度
- 播放进度的刷新
进度刷新是靠ontimeupdate触发修改progress.value实现，通过监听onchange事件；来更新播放进度。
- 全屏API不同
这里firefox和chrome的全屏API不同，和标准API也不同，调用的时候判断一下就可以了，firefox全屏后，底部没有控制栏，chrome则有简单的控制栏。
$("#fullScreen").on("click",function(){
if(video.requestFullScreen){
video.requestFullScreen();
return ;
}
if(video.webkitRequestFullScreen){
video.webkitRequestFullScreen();
return ;
}
if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
return ;
}
console.log("您的浏览器不支持全屏");
});
- 时间格式化函数
输出30:30:30这样子的效果
function timeFormat(time){
time = Math.floor(time)
var s = time%60;
var i = Math.floor(time/60)%60;
var h = Math.floor(Math.floor(time/60)/60);
return h+":"+i+":"+s;
}
- 调试
思路大概就是这样子，期间还要不停调试，在本地开发的时候，资源放本地上面，加载时间几乎可以忽略不计，但是放我的主机上，一兆的小水管经常卡住，这时候就需要loading提示，暂停后开始播放，中间的播放按钮还在，或者播放时候，下面面板播放按钮没有刷新，音量面板自动隐藏这些细节都是在调试的时候才发现的。