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

2024-07-10 22:22| 来源: 网络整理| 查看: 265

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

1、video标签的属性

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

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

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

你的浏览器不支持HTML5视频。重点：poster属性的使用

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

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

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

3、控件的显示与隐藏

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 } }

【本文地址】

公司简介

联系我们