先看图,成品大概就是这样子,很简陋的一个播放器,控制播放,进度条,音量,播放时间这么几个按钮。图标网上找的,大小颜色都不一样(尴尬)
html5视频播放器.png

  1. 先做出一个基本的界面出来,界面包括播放视屏界面还有下面的控制面板界面
面板包括最基本的组件,一次是播放/暂停按钮、进度条、时间、音量、全屏,当然还可以包括其他元素,比如分享,下载弹幕什么的。这里用的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>
```
  1. video的事件和属性,这里就说一下会用到的
**事件**
* `oncanplay`:视频加载完成可以播放时(没有全部加载完成)触发,第一次打开页面开始加载或者修改`currentTime`会触发事件
* `onended`:这个比较简单,就是视频播放结束的时候触发,可以用来控制播放下一个
* `ontimeupdate`:播放时触发,用来更新时间的
* `onwaiting`:视频加载时触发,用来控制loading图标的。

**属性**
* `paused`是否暂停。true表示暂停,false播放中。
* `videoWidth`/`videoHeight`:视频宽度高度,在视频信息还没加载完成前都为0
* `currentSrc`:资源地址
* `duration`:总时长
* `currentTime`:当前播放的时间
* `volume`:音量,范围0-1
可以参考w3给出的例子
![w3_video.png][2]
  1. 关于音量部分的实现

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有上限和下限,因此不用担心改过头了。同理,可以用来控制播放进度

  1. 播放进度的刷新

进度刷新是靠ontimeupdate触发修改progress.value实现,通过监听onchange事件;来更新播放进度。

  1. 全屏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("您的浏览器不支持全屏");
});
  1. 时间格式化函数
输出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;
}
  1. 调试

思路大概就是这样子,期间还要不停调试,在本地开发的时候,资源放本地上面,加载时间几乎可以忽略不计,但是放我的主机上,一兆的小水管经常卡住,这时候就需要loading提示,暂停后开始播放,中间的播放按钮还在,或者播放时候,下面面板播放按钮没有刷新,音量面板自动隐藏这些细节都是在调试的时候才发现的。

慕课上的一篇帖子,很具体
这是w3给出的参考例子,很方便
还有菜鸟教程的参考资料