如何實現影片封面圖的動態預覽效果

使用場景

在播放影片的入口頁面，每個影片的封面圖多數是靜態圖片，觀眾需要點擊進入影片播放才能看到影片內容；如果想讓觀眾不進入影片播放頁面即可快速瀏覽影片內容，可以透過封面圖的動態預覽效果來實現。 當滑鼠懸停在影片封面圖上時，會載入動態預覽圖，並會隨著滑鼠的移動顯示不同時間點的影片截圖。

Demo效果

實現方式

首先在頁面中引用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下載： 點擊下載Demo

注意事項

只有時長大於5分鐘的影片才會產生動態預覽圖，時長小於5分鐘的影片只會顯示靜態的封面圖。