HTML5 視頻：如何用海報覆蓋控制器

Question

我正在使用 HTML5 從后端加載視頻。 用戶體驗需要覆蓋整個 HTML5 視頻播放器的封面圖片，包括控制器。 問題是當我使用海報屬性加載封面圖像時，它沒有覆蓋控制器。 就像他們的 z-index 高於海報一樣。 請看下圖：

我怎樣才能讓海報圖像也覆蓋控制器？

Answer 1

這是一個簡單的解決方案。

1) 從視頻元素中刪除控件屬性

2）點擊視頻時顯示控件，如onclick="this.controls = true"或在事件偵聽器中，例如

var video = document.getElementById('video');
video.addEventListener('click', function(){
    video.controls = true;
}, false);

3）如果您不想在視頻尚未加載時顯示控件，您可以檢查其readyState https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState