html5设置视频第一帧为缩略图

在使用html5开发网页中播放视频功能时,常常需要使用封面图,也就是视频在未播放状态时所呈现的图像。

目前各种短长视频漫天飞的时代,鸿硕相信您一定感受到了一个视频封面的重要性,某些知名媒体经常使用视频的缩略图来吸引人,来让客户产生点进去看的冲动。

还有一种情况,视频封面显示的内容和您点进去看的内容不相关,所以视频封面算是非常重要了,往往决定着用户是否点击观看这个视频。

恰好鸿硕正在开发Hongshop商城主题,借鉴于某宝某东的产品相册轮播效果,然后鸿硕团队自己开发的效果如下:

后台可以上传视频 + 视频的封面图片;

如果后台没有上传视频的封面图片,则在前端显示时,显示的是视频的第一帧的截图为视频区显示效果;

如果后台上传的有视频的封面图片,则在前端显示视频的用户后台上传的封面图片;

前端和后台效果,如下图:

html5实现视频封面效果代码:

1,使用具体的图片来作为视频封面

video标签中直接加poster属性,属性值为图片的路径。

<video width="470" height="255" poster="placeholder.png" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
<object data="video.mp4" width="470" height="255">
<embed src="video.swf" width="470" height="255">
</object>
</video>

2,使用视频的第一帧截图为视频的封面

注意 preload="metadata" 和 第一帧#t=0.5视频源

<video width="400" controls="controls" preload="metadata">
<source src="https://www.w3schools.com/html/mov_bbb.mp4#t=0.5" type="video/mp4">
</video>

 

给TA打赏
共{{data.count}}人
人已打赏
wordpress教程

获取内容类型扩展视频字段的方法

2022-3-10 15:23:47

woocommercewordpress教程

wordpress内容详情页获取该页所属的全部分类项

2022-3-20 19:38:50

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索