HTML5視頻播放按鈕疊加問題

我正在創建視頻播放器，無法通過單擊我的playButton疊加層找出如何讓我的視頻播放。最終目標是通過點擊按鈕並按鈕消失來實現播放，當您想暫停點擊視頻並重新播放按鈕時，但是我站在哪裏，當我點擊時我甚至無法播放視頻覆蓋播放按鈕。HTML5視頻播放按鈕疊加問題

<div class="wrapper"> 
<video class="video" id="video" loop controls onclick="playPause()"> 
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> 
</video> 
<div class="playButton" onclick="playPause()"></div> 
</div>

腳本

var bunnyVideo = document.getElementById("video"); 
function playPause() { 
if (bunnyVideo.paused) 
{   
     bunnyVideo.play(); 
} 
    else 
    { 
     bunnyVideo.pause(); 
    } 

}

https://jsfiddle.net/sbtL5bag/

來源

2017-03-16 GiBiT 09

如果你改變你的JavaScript 負載類型No wrap - in <body>然後它工作。

JSFiddle

來源

2017-03-16 19:49:32

真棒謝謝，任何想法如何切換該播放按鈕？ –

也是沒有換 - 標籤，只有jsfiddle的東西？或者我需要在我的網站上專門做些什麼？ –

@ GiBiT09該選項指定您的JavaScript輸入到頁面的位置。 onLoad選項在加載頁面後加載，在元素'onclick'和另一個作用域中'playPause'函數被引用之後*就是*。你也可以在頭部翹曲代碼，但是你還需要在函數中放入'bunnyVideo'初始化，因爲頭部加載時'video'元素不可用。 –

HTML5視頻播放按鈕疊加問題

回答

相關問題