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

## 使用场景

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

## Demo效果

![dpd\_new (3)](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-e9401944198ca5b175ecc0f232f0cd4cb7cba793%2Fdpd_new-3.gif?alt=media)

## 实现方式

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

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

其中，id为点播视频的vid，style中的width、height可设置为页面中需要显示的封面图宽高。 Demo下载： [点击下载Demo](https://git.polyv.net/help-center/document-center/-/blob/master/third_res/dynamicPreviewDemo.zip)

## 注意事项

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