Question

使用 Javascript 时视频不会暂停

2017-03-03

843

javascript html video pause

我有一个项目，其中有一个循环播放的视频。这是视频标签的 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
};

或者将脚本标记放在文档底部的 body 关闭标记之前。

旧答案 -

在设置超时之前，请确保视频正在播放。短暂的 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

一切正常！

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

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

也许，只需增加计时器。

Answer 3

我会尝试这样的事情：

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

William Pederzoli

2017-03-03