視頻僅在視頻播放時控制（html5）

Question

我正在使用video元素在我的網站上顯示視頻。 我使用了poster屬性來顯示帶有一些文本和播放按鈕的圖像。 使用Javascript，我定義了如果您單擊視頻元素/海報，則視頻開始。 現在，我只希望在播放視頻時顯示視頻的控件（播放/暫停按鈕，聲音，全屏），以便您可以暫停視頻或調節音量。 我添加了controls屬性，但現在在不播放視頻時它也顯示控件。

<video id="video" class="width-100 display-none borderRadius-l breakPointM-display-inline video" poster="splashvideo.png" preload="auto" controls  width="300" height="150">
<source src="video.mp4" type="video/mp4" />
</video>

我可以用一些JavaScript或CSS修復此問題嗎？

Answer 1

我知道很久以前就問過這個問題，但是我想看看有人對此是否有很好的解決方案，所以以為我與我分享。

回答你的問題； 是的，您可以使用Javascript或CSS修復此問題。

我想出的解決方案是在點擊視頻后使用Javascript添加控件屬性。 因此，與使用單擊事件處理使用JS進行播放和暫停的click事件的方式相同，您只需同時添加或刪除屬性“ controls”。

https://developer.mozilla.org/en/docs/Web/API/Element/setAttribute el.setAttribute('controls','');

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/removeAttribute el.removeAttribute('controls');

測試中

• Chrome（56）：有效 ，控件可以快速淡入和淡出，並在視頻上移動鼠標時再次顯示
• Firefox（52）：有效 ，在視頻上移動鼠標后控件才會顯示
• Safari（10）：有效 ，控件保持可見，直到鼠標移出視頻
• 優勢：沒有測試:(

Answer 2

是的，完整的解決方案如下所示：

HTML：使用onclick =“ this.play”單擊海報時播放視頻。

<video id="video1" class="width-100 display-none borderRadius-l breakPointM-display-inline video" 
poster="https://placehold.it/350x150" preload="auto" width="300" height="150" onclick="this.play()">
<source src="video.mp4" type="video/mp4" />
</video>

JS代碼：添加用於播放和暫停的事件偵聽器，以下內容在暫停時刪除控件，在播放時恢復控件。

var video1 = document.getElementById('video1');

function videoPausePlayHandler(e) {
    if (e.type == 'playing') {
     //add controls
     video1.setAttribute("controls","controls");
    } else if (e.type == 'pause') {
   //remove controls
   video1.removeAttribute("controls");
    }
}

//Add event listeners
video1.addEventListener('playing', videoPausePlayHandler, false);
video1.addEventListener('pause', videoPausePlayHandler, false);

您可以在這里看到它的工作： https : //jsfiddle.net/pypgjt4r/