Видео не будет приостановлено с использованием 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).

Просто запустите код скрипта следующим образом:

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

Или больше тега script внизу документа перед тегом закрытия тела.

Старый ответ -

Перед установкой тайм-аута убедитесь, что видео действительно воспроизводится. С небольшой задержкой в ​​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);