JavaScript在使用setTimeout时未被执行，但在按钮点击事件中执行。

Question

JavaScript在使用setTimeout时未被执行，但在按钮点击事件中执行。

javascripthtml

4

我正在尝试在网页中查看IP摄像头的视频流，当流可以播放时，我希望它能自动开始播放。通过计时器尝试实现，如果播放失败，则再次尝试。

然而，计时器（超时）似乎没有实现这个功能，但是如果使用按钮执行脚本，则可以。我错过了什么？

请参见下面的代码。

谢谢，

Ron

PS：我已经注释掉了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>

- Ron

4个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user2950720 · Answer 1

查看视频HTML5标签的功能：(https://www.w3schools.com/tags/tag_video.asp)

其中一个可选属性是autoplay（指定视频准备就绪后立即开始播放），因此无需设置超时。

<video id="IPcamerastream" src="http://192.168.2.8:8080" width="960" height="540" autoplay></video>

- Olaf Tietze · Answer 2

将您的脚本移动到视频元素下方，这样在执行脚本时，该元素已经初始化，因此不需要超时。因此，document.getElementById 应立即解析该元素。

使用计时器会引入竞争条件。如果有必要，您应该添加一个监听器到 DOMContentLoaded 事件。

- Tech1337 · Answer 3

欢迎，Ron，

这是一个格式良好的问题，但目标浏览器信息也可以帮助你解决问题。请考虑在将来添加它！

至于你的问题，你告诉我们你希望视频在页面加载时自动播放，我假设是这样的？

我还删除了重复的源代码粘贴。

在这种情况下，只有在 promise 错误时才从中调用 playVid()。初始调用绑定到按钮点击事件。

简而言之，只有点击按钮才会启动 playVid() 函数。

你需要为 DOM 准备就绪添加一个事件监听器，并在其中调用 playVid()。否则，它只会在你点击按钮时被调用！


document.addEventListener('DOMContentLoaded', (event) => {
    //the event occurred
    playVid();
});

您还可以在视频标签中使用自动播放的HTML选项。

lang-html
 <video {...} autoplay />

- ICIC · Answer 4

我曾经遇到过类似的问题，在一个WebRTC项目中接收视频流时，视频不会显示，除非点击按钮。

如果想要自动播放接收到的视频流，应在视频标签中添加“muted”属性。