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中可能不准确这种情况，所以一种方法是仅在playing：

时触发

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>

Answer 2

它工作正常！

＆＃13;

function stopVideo() {
  var vid = document.getElementById('myVid');
  vid.pause();
}
setTimeout(stopVideo, 5000);

＆＃13;

<video playsinline autoplay muted loop id="myVid" width="400px" >
    <source src="http://mazwai.com/system/posts/videos/000/000/123/original/victor_ciurus--5d_mark_iii_magic_lantern_14_bits_raw_video.mp4" type="video/mp4">
</video>

＆＃13;

也许，只需增加计时器。

Answer 3

我会尝试这样的事情：

setTimeout(function () {stopVideo()}, 900);

视频不会使用Javascript暂停

3 个答案: