僅當視頻播放時使用視頻控件（html5）

我正在使用視頻元素在我的網站上顯示視頻。我使用海報屬性來顯示帶有一些文字和播放按鈕的圖像。使用Javascript，我定義瞭如果你點擊視頻元素/海報，視頻就開始了。現在，我只想播放視頻時只顯示視頻（播放/暫停按鈕，聲音，全屏）控件，因此您可以暫停視頻或調整音量。我添加了控件屬性，但現在它還顯示不播放視頻的控件。僅當視頻播放時使用視頻控件（html5）

<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來解決這個問題嗎？

來源

2016-04-15 Maarten

我知道這是問了一段時間後，但我想看看是否有人有一個很好的解決方案，這是空的，所以認爲我分享我的。

要回答你的問題;是的，你可以用Javascript或CSS來解決這個問題。

我想出的解決方案是在點擊視頻時使用Javascript來添加controls屬性。因此，就像使用JS處理播放和暫停的單擊事件一樣，您只需同時添加或刪除屬性「controls」。

https://developer.mozilla.org/en/docs/Web/API/Element/setAttribute

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

測試

鉻（56）：工程，控制淡入並很快淡出，再次顯示當鼠標移動視頻
火狐（52）：作品，控制不顯示直到鼠標上的視頻移動
Safari瀏覽器（10）：工程，控制，直到鼠標移動保持可見視頻
邊緣之外：沒有測試:(

來源

2017-03-08 18:20:40

是的，完整的解決方案是這樣的：

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/

來源

2017-03-08 19:28:22 l33tstealth

僅當視頻播放時使用視頻控件（html5）

回答

相關問題