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 }
 }
    原文作者:MeetCode
    原文地址: https://blog.csdn.net/qq_42580876/article/details/109732326
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞