自定义HTML5视频播放器

<video width="100%" height="100%" id="playVideo">
  <source src="视频地址" type="video/mp4"></source>
</video>
<!--自定义进度条和音量控制-->
<div class="playControll">
    <div class="playPause playIcon"></div>
    <div class="timebar">
        <span class="currentTime">0:00:00</span>
        <div class="progress">
            <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
        </div>
        <span class="duration">0:00:00</span>
    </div>
    <div class="otherControl">
        <span class="volume glyphicon glyphicon-volume-down"></span>
        <span class="fullScreen glyphicon glyphicon-fullscreen"></span>
        <div class="volumeBar">
            <div class="volumewrap">
                <div class="progress">
                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 8px;height: 40%;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

var myVid=document.getElementById("playVideo");
//播放的速度
myVid.playbackRate = 1
myVid.onloadstart = function(){
  console.log(`onloadstart  客户端开始请求数据  `);
}
myVid.ondurationchange=function(){
  console.log(`durationchange 资源长度改变  `);
}
myVid.onratechange=function(){
  console.log(`onratechange  //播放速率改变  `);
}
myVid.onseeking=function(){
  console.log(` //seeking  寻找中 点击一个为（缓存）下载的区域`);
}
myVid.onseeked=function(){
  console.log(` //seeked 寻找完毕 `);
}
myVid.onplay=function(){
  console.log(`开始播放时触发 `);
}
myVid.onwaiting=function(){
  console.log(`播放由于下一帧数据未获取到导致播放停止，但是播放器没有主动预期其停止，仍然在努力的获取数据，简单的说就是在等待下一帧视频数据，暂时还无法播放。 `);
}
myVid.onplaying=function(){
  console.log(`真正处于播放的状态，这个时候我们才是真正的在观看视频。 `);
}
myVid.oncanplay=function(){
  console.log(`视频播放器已经可以开始播放视频了，但是只是预期可以正常播放，不保证之后的播放不会出现缓冲等待。 `);
}
myVid.onpause=function(){
  console.log(`暂停播放时触发 `);
}
myVid.onended=function(){
  alert(` //播放结束 loop 的情况下不会触发  `);
}
myVid.onvolumechange=function(){
  console.log(`音量改变  `);
}
myVid.onloadedmetadata=function(){
  console.log(`获取视频meta信息完毕，这个时候播放器已经获取到了视频时长和视频资源的文件大小。 `);
}
myVid.onloadeddata=function(){
  console.log(`"视频播放器第一次完成了当前播放位置的视频渲染。"`);
}

myVid.onabort=function(){
  console.log(`客户端主动终止下载（不是因为错误引起）， `);
}

myVid.onerror=function(){
  console.log(`请求数据时遇到错误`);
  //1.用户终止 2.网络错误 3.解码错误 4.URL无效
  alert(myVid.error.code);
}

//客户端请求数据
myVid.onprogress=function(){
  console.log(`客户端正在请求数据 触发多次，是分段请求的`);
  console.log(myVid.buffered);
   //0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到资源
  console.log(`networkState ${myVid.networkState}`);
  //  //当前播放的位置，赋值可改变位置 myVid.currentTime = 11 从11秒位置开始播放
  console.log(myVid.currentTime);
  // //返回当前资源的URL
  console.log(myVid.currentSrc);

  console.log(myVid.videoWidth);
  //播放结束 返回true 或 false
  console.log(myVid.ended);
  //音量大小 为0-1 之间的值
  console.log(myVid.volume);


  //当前资源长度
  console.log(myVid.duration);
  console.log(myVid.startDate)
  // myVid.currentTime = 11
}

var myVid=document.getElementById("playVideo");
myVid.play(); //播放视频
myVid.pause();  //暂停视频
myVid.width=560; //设置视频宽度
myVid.height=560;  //设置视频高度
myVid.volume = 0.8; // 音量控制

// 全屏
if (playVideo[0].requestFullscreen) {
    playVideo[0].requestFullscreen();
} else if (playVideo[0].mozRequestFullScreen) {
    playVideo[0].mozRequestFullScreen();
} else if (playVideo[0].webkitRequestFullscreen) {
    playVideo[0].webkitRequestFullscreen();
} else if (playVideo[0].msRequestFullscreen) {
    playVideo[0].msRequestFullscreen();
}
// 退出全屏
if (document.exitFullscreen) {
    document.exitFullscreen();
} else if (document.mozExitFullScreen) {
    document.mozExitFullScreen();
} else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
}