video添加缩略图 js HTML5 video视频播放前加缩略图

javascript 02-21 18:27

video视频标签，在电脑显示时会有缩略图显示，但是在部分手机上如苹果手机，则不会显示，为了界面的美观，我们需要在视频播放前，先加载一张视频的缩略图。

HTM代码如下

<video id="video" width="450" height="358" muted="muted" controls="controls" poster="/video/ku51net.png">
  <source src="/video/ku51net.mp4" type="video/mp4"></source>
</video>

HTML5 Video标签属性

属性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload preload

如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

猜您喜欢

相关推荐