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

  1. 先做出一个基本的界面出来,界面包括播放视屏界面还有下面的控制面板界面

    面板包括最基本的组件,一次是播放/暂停按钮、进度条、时间、音量、全屏,当然还可以包括其他元素,比如分享,下载弹幕什么的。这里用的html5元素主要是videosource,video是视屏播放的界面,source是资源,video里面可以有多个source资源,浏览器会略过不支持的格式。

    <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,也都支持。 具体代码如下: javascript 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提示,暂停后开始播放,中间的播放按钮还在,或者播放时候,下面面板播放按钮没有刷新,音量面板自动隐藏这些细节都是在调试的时候才发现的。 慕课上的一篇帖子,很具体 这是我做的demo 这是w3给出的参考例子,很方便 还有菜鸟教程的参考资料 [1]: /images/2016/08/2129411503.png [2]: /images/2016/08/2750844319.png