video标签属性总结

导读：video标签在H5页面上是常用的播放视频的标签，有很多新属性，在这里总结一下，作video的日常熟悉和平时使用时的翻阅查询之用。
视频格式有.mp4 .webm .ogg这几种格式的， 在浏览器上支持的最好的是.mp4所以推荐使用mp4格式的视频播放源。

1、video 标签简单使用

source标签：video标签包裹着source标签，source标签的使用类似img标签，设置src为目标URL
Height：设置视频的高度
Width：设置视频的宽度
提示语：在低版本的不支持video标签的浏览器上会显示如下提示语：不支持video,建议升级浏览器

   <video id="videoId" width="800" height="400" >
      <!-- .mp4格式的浏览器都能播  -->
      <source src="./video/01.XXXXXX.mp4" id="sourceId" />
      不支持video,建议升级浏览器
    </video>

2、video 的样式

  video {
        object-fit: fill; /*cover封面覆盖*/
      }

3、video 标签上的属性

以下是可以直接写到video标签上的属性

3.1 autoplay

自动播放,但被浏览器限制了此功能，被内部机制认为是垃圾广告为了客户体验度，限制了自动播放功能, 只能是客户click || 静音模式muted时允许自动播放

   <!-- 这种情况下，autoplay+muted  会静音自动播放  -->
   <video id="videoId" width="800" height="400"  autoplay  muted>
      <source src="./video/01.XXXXXX.mp4" id="sourceId" />
    </video>

3.2 muted

muted 写在标签上，播放时会被静音

3.3 controls

控制台.浏览器默认控件，如果要用自己的控件那么不要设置这个

3.4 loop

循环播放 ，视频结束后又从头开始播放

3.5 poster

封面信息，未播放时显示的封面,或者下载的图像展示，如果未设置取视频第一帧（第一帧有可能是没有图像的黑屏或白屏）

3.6 preload

设置视频预加载，注意：预加载大型视频文件，预加载过渡使用，会造成性能浪费。
值：
none：不预加载任何东西
metadata：默认值，仅预加载视频的原数据（视频总时长和视频的轨道）
auto：预加载整个视频，包括视频的所有帧

4、video 的js方法

通过js调用video元素上挂载的方法
var vId = document.getElementById(‘videoId’) // 获取video元素

4.1 播放 .play()

html部分

   <video id="videoId" width="800" height="400"  autoplay  muted>
      <source src="./video/01.XXXXXX.mp4" id="sourceId" />
    </video>
    <!--以下是自定义control控制台按钮  -->
    <div class="control">
   		<button onclick="playHandler()">播放</button>
    </div>

js部分

playHandler(){
  	vId.play()
}

4.2 暂停 .pause()

4.3 检测 .canplay(type)

#videoid .canplay(type) 检测浏览器能否支持的格式type

4.4 重新加载 .load()

使用场景：.load() 在更换视频源src后,或者改变autoplay属性，必须重新调用load加载视频

4.4.1 更换视频源地址，切换下一个视频

	function changeSrc(){
	     var sourceId = document.getElementById('sourceId')
	     sourceId.src = './video/02.XXXXX.mp4'
         vId.load()    // 注意必须load()
}

4.4.2 改变autoplay属性后

     function autoPlay() {
        console.log('自动播放', vId.autoplay)
        vId.autoplay =true
        vId.load() // 必须load()
      }

5、video 的js属性

可以通过js读写video元素上挂载的属性值

未完待续。。。