废话不多说直接上代码：

<div class="vido" style="width:500px;height:500px;margin: 50px auto;">
  <video controls="controls" autoplay="autoplay" preload="true" poster="1.png" style="width: 100%;height: 100%;object-fit: fill;">      //填充DIV容器
   <source src="v.mp4" type="" />  //指定资源
   <source src="m2.mp3" type="">
   </video>
</div>

JS 相关操作：

操作之前都要获取JS对象，video 和audio的方法基本上一样

1.poster属性 默认显示的图片  preload 加载完再放   vd.networkState返回网络状态
2.currentTime 返回当前进度，可以进行值的调整
3.vd.duration //获取资源长度
4.自定义时间控件：
   now = times.toFixed(0); //取整
   hour = Math.floor(now/3600);//获取小时
   minute =Math.floor((now/60)%60); //分
   now = now%60;//秒
5.webkitRequestFullScreen(); //全屏
  document.webkitCancelFullScreen(); //(webkit )
  document.mozCancelFullScreen(); // (Firefox)
  document.mozRequestFullScreen(); // (Firefox)

6.progress 事件 
7.vd.playbackRate = 2;// 2倍播放速度
8.vd.muted = true; //静音
9.vd.volume = 0.6; //调节音量 0-1
10.vd.pause();//停止  play()播放
11.vd.currentSrc); // 返回播放 的资源
12.vd.networkState);// 返回网络状态
13.controls="controls"  //属性 是否显示默认控件 autoplay="autoplay" 自动播放