視頻不會使用Javascript暫停

我有一個項目，有一個循環播放的視頻。這裏是視頻標籤的HTML：視頻不會使用Javascript暫停

<video playsinline autoplay muted loop id="myVid"> 
     <source src="River.mp4" type="video/mp4"> 
    </video>

我想視頻暫停後，我試圖用JavaScript來實現這一點。我的javascript代碼：

function stopVideo() { 

    var vid = document.getElementById('myVid'); 
    vid.pause(); 

    } 

setTimeout(stopVideo, 900);

這是行不通的。任何想法爲什麼？謝謝。

---------------------------------------------- - - - - - - - - -編輯 - - - - - - - - - - - - - - - - ------------------------------

如果有幫助，錯誤控制檯給我一條消息：

TypeError: null is not an object (evaluating 'vid.pause')

來源

2017-03-03 Paul

是的。這是一個錯字。我會糾正它。 – Paul

null表示找不到該元素，表示該腳本在構建DOM之前正在運行（即在頭標記中）。答案已更新。 – K3N

我會嘗試這樣的事：

setTimeout(function() {stopVideo()}, 900);

來源

2017-03-03 22:21:41

更新基於新的信息，從OP：

的null意味着元素沒有被發現getElementById()，表明DOM是建立前的腳本運行（即頭標記）。

只需在頭部像這樣運行腳本代碼，如果：

window.onload = function() { 
    // code goes here 
};

或多個腳本標籤到文檔的身體緊貼標籤之前的底部。

舊的答案 -

之前設置超時，請確保該視頻確實正在播放。短暫延遲900ms（0.9s），您可能會在視頻開始播放之前觸發超時代碼觸發。

可以肯定的視頻確實正在播放，您可以使用事件，如playing和timeupdate，但在timeupdate可能是不準確的這種情況下，這樣的一種方式周圍是隻觸發時playing：

var vid = document.getElementById('myVid'); 
 
var reqId; // optional, prevents running more than one time 
 

 
vid.addEventListener("playing", function() { 
 
    if (!reqId) reqId = setTimeout(stopVideo.bind(this), 2000); 
 
}); 
 

 
function stopVideo() { 
 
    this.pause(); 
 
}

video {height:200px}

<video playsinline autoplay muted loop id="myVid"> 
 
    <source src="//media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> 
 
</video>

來源

2017-03-03 23:02:45 K3N

視頻不會使用Javascript暫停

回答

相關問題