慕無忌1623718
2021-06-17 10:29:00
我試圖在網頁中查看來自 IP 攝像機的視頻流,當可以播放該流時,我希望它自動啟動。嘗試使用計時器執行此操作,嘗試播放,如果失敗,請重試。計時器(超時)似乎不會這樣做,但是如果我使用按鈕執行腳本,它會這樣做。我錯過了什么?請參閱下面的代碼。我注釋掉了 setTimeout 函數,以使按鈕工作。 <!DOCTYPE html> <html> <body> <script type="text/javascript"> function playVid() { var videoElem = document.getElementById("IPcamerastream"); var playPromise = videoElem.play(); // In browsers that don’t yet support this functionality playPromise won’t be defined. if (playPromise !== undefined) { playPromise.then(function() { // Automatic playback started! videoElem.controls = true; }).catch(function(error) { // Automatic playback failed. // setTimeout(playVid, 1000); }); } } //setTimeout(playVid, 1000); </script> <button onclick="playVid()" type="button">Play Video</button><BR> <video id="IPcamerastream" src="http://192.168.2.8:8080" width="960" height="540"></video> </body> </html>
3 回答
狐的傳說
TA貢獻1804條經驗 獲得超3個贊
將您的腳本移到 video 元素下方,您根本不需要超時,因為在執行腳本時該元素已經被初始化。所以document.getElementById應該立即解析元素。
使用計時器會引入競爭條件。如果有的話,您應該為DOMContentLoaded事件添加一個偵聽器。
隔江千里
TA貢獻1906條經驗 獲得超10個贊
這是一個格式良好的問題,但目標瀏覽器信息也可以幫助您解決問題。請考慮將來添加它!
至于您的問題,您告訴我們您希望視頻自動播放,我假設在頁面加載時?
我還刪除了重復的源粘貼。
在這種情況下,您只能playVid()從出錯的承諾中調用。初始調用綁定到按鈕單擊事件。
簡而言之,只有單擊按鈕才會啟動該playVid()功能。
您需要為 DOM 就緒添加一個事件偵聽器并playVid()在其中調用。否則,它只會在您單擊按鈕時被調用!
document.addEventListener('DOMContentLoaded', (event) => {
//the event occurred
playVid();
});
您還可以在視頻標簽中使用自動播放 HTML 選項。 lang-html
<video {...} autoplay />
添加回答
舉報
0/150
提交
取消
