我试图在网页中查看来自 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
提交
取消