video标签设置封面图、控件的显隐

video标签设置封面图、控件的显隐

1、video标签的属性

autoplay：	如果出现该属性，则视频在就绪后马上播放。
controls： 	如果出现该属性，则向用户显示控件，比如播放按钮。
height：	  设置视频播放器的高度。
loop：       如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted：      如果出现该属性，视频的音频输出为静音。
poster：    规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload：  如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src：	     要播放的视频的 URL。
width：	设置视频播放器的宽度。

video和 audio元素的方法、属性和事件可以使用JavaScript进行控制，其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，video元素开始播放、已暂停，已停止，等等。

2、设置视频的封面图
第一种，直接把封面图的地址赋值给poster

<video width="100%" height="100%" controls="controls" poster="封面图地址" >
    <source src="视频地址">
 	你的浏览器不支持HTML5视频。
</video>

重点：poster属性的使用

第二种，在视频链接中获取第几秒画面作为封面图（预览图）

<video
          id="video"
          controls="controls"
          height="675"
          width="1200"
          loop
          poster="/video/6e47b03090b44a518b6d0b7344f2b36c.mp4?vframe/jpg/offset/2/w/1200/h/675">
              <source src="/video/6e47b03090b44a518b6d0b7344f2b36c.mp4" type="video/mp4"/>
</video>

poster="/video/6e47b03090b44a518b6d0b7344f2b36c.mp4?vframe/jpg/offset/2/w/1200/h/675"

jpg：设置封面图的图片格式
offset/2：在视频连接的第几秒作为封面
w/1200：封面图的宽度
h/675：封面图的高度

3、控件的显示与隐藏

<div class="video-content">
          <video
          id="video"
          controls="controls"
          height="675"
          width="1200"
          loop
          poster="/video/6e47b03090b44a518b6d0b7344f2b36c.mp4?vframe/jpg/offset/2/w/1200/h/675">
              <source src="/video/6e47b03090b44a518b6d0b7344f2b36c.mp4" type="video/mp4"/>
          </video>
          <div id="poster">
            <div class="mask"></div>
            <div class="video-img" @click="onPlay"><img src="@/assets/isle/play.svg" /></div>
          </div>
</div>

 setup () {
      function onPlay() {
       const video = document.getElementById('video')
        document.getElementById('poster').style.display = 'none'
        video.controls = true   // 控件的显示
        video.play()
      }
      onMounted(() => {
        const video = document.getElementById('video')
        video.controls = false  // 初始化时，控件设置为隐藏
    })
        return { onPlay }
 }