How to Implement Dynamic Preview Effects for Video Cover Images

Use Case

On the entry page for playing a video, most video cover images are static. Viewers need to click to enter the video playback page to see the video content. To allow viewers to quickly preview video content without entering the playback page, you can achieve this through a dynamic preview effect on the cover image.
When the mouse hovers over the video cover image, a dynamic preview image loads, and as the mouse moves, it displays video screenshots at different time points.

Demo Effect

Implementation Method

First, reference the polyv-cover-preview.js file from the demo in the page. Then, embed the following code on the page where the dynamic preview effect is needed:

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

Here, id is the vid of the on-demand video, and width and height in the style can be set to the dimensions of the cover image to be displayed on the page.

Demo Download:
Click to Download Demo

Notes

Only videos longer than 5 minutes will generate a dynamic preview image. Videos shorter than 5 minutes will only display a static cover image.