javascript 不是用 setTimeout 执行的,而是用按钮单击事件执行的

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


慕无忌1623718
浏览 139回答 3
3回答

狐的传说

将您的脚本移到 video 元素下方,您根本不需要超时,因为在执行脚本时该元素已经被初始化。所以document.getElementById应该立即解析元素。使用计时器会引入竞争条件。如果有的话,您应该为DOMContentLoaded事件添加一个侦听器。

隔江千里

这是一个格式良好的问题,但目标浏览器信息也可以帮助您解决问题。请考虑将来添加它!至于您的问题,您告诉我们您希望视频自动播放,我假设在页面加载时?我还删除了重复的源粘贴。在这种情况下,您只能playVid()从出错的承诺中调用。初始调用绑定到按钮单击事件。简而言之,只有单击按钮才会启动该playVid()功能。您需要为 DOM 就绪添加一个事件侦听器并playVid()在其中调用。否则,它只会在您单击按钮时被调用!document.addEventListener('DOMContentLoaded', (event) => {&nbsp; &nbsp; //the event occurred&nbsp; &nbsp; playVid();});您还可以在视频标签中使用自动播放 HTML 选项。 lang-html&nbsp;<video {...} autoplay />
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript