如何实现视频封面图的动态预览效果

使用场景

在播放视频的入口页面,每个视频的封面图多数是静态图片,观众需要点击进入视频播放才能看到视频内容;如果想让观众不进入视频播放页面即可快速浏览视频内容,可以通过封面图的动态预览效果来实现。
当鼠标悬停在视频封面图上时,会加载动态预览图,并会随着鼠标的移动显示不同时间点的视频截图。

Demo效果

dpd_new (3)

实现方式

首先在页面中引用demo中的polyv-cover-preview.js文件,然后在需要显示动态预览效果的页面,嵌入以下代码:

<div data-vid="f13e9957353bbc54d8922d1cbd55ab9a_f" class="polyv-cover-preview" style="width:160px; height:90px;"></div>

其中,id为点播视频的vid,style中的width、height可设置为页面中需要显示的封面图宽高。
Demo请点击这里下载。

注意事项

只有时长大于5分钟的视频才会生成动态预览图,时长小于5分钟的视频只会显示静态的封面图。

以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...