javascript - 使用 Javascript 视频不会暂停

Question

我有一个项目，其中有一个循环播放的视频。这是视频标签的 html:

  <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')

Answer 1

根据 OP 的新信息进行更新:

null 表示 getElementById() 未找到该元素，表明脚本在 DOM 构建之前运行(即在 head 标签中)。

只需运行这样的脚本代码，如果在 head 中:

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

或者将脚本标记添加到文档底部的正文关闭标记之前。

旧答案 -

在设置超时之前，请确保视频确实正在播放。如果有 900 毫秒(0.9 秒)的短暂延迟，您可能会面临在视频开始播放之前触发超时代码的风险。

要确保视频确实正在播放，您可以使用 playing 和 timeupdate 等事件，但在 timeupdate 中可能不准确这种情况，所以一种解决方法是仅在播放时触发:

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>