視頻播放結束后如何優雅地恢復封面圖？

優雅恢復視頻播放結束后的封面圖，提升用戶體驗！

許多開發者在使用html5

關鍵在于利用

實現方法：在

以下是一個示例代碼：

<video controls="controls" onended="showImg()" src="/i/movie.ogg">   您的瀏覽器不支持 video 標簽 </video> @@##@@  <script>   function showImg() {     document.getElementById("coverImage").style.display = "block";   } </script>

代碼說明：

• onended=”showImg()”：在視頻播放結束后調用 showImg() 函數。
• ：HTML 中添加一個用于顯示封面的 元素，初始狀態 display: block; (顯示)。 src 屬性替換為你的封面圖片路徑。
• showImg() 函數：通過 document.getElementById() 獲取封面圖片元素，并將其 display 屬性設置為 “block” 來顯示。 (如果視頻播放前封面圖隱藏，則需要將其顯示) /i/movie.ogg 需要替換為你的視頻文件路徑。

通過此方法，在視頻播放結束后高效恢復封面圖片，避免不必要的資源浪費，提升用戶體驗。 請確保替換代碼中的占位符路徑為你的實際路徑。