Добавление прослушивателей событий для воспроизведения, паузы и перехода в секунды в видео HTML5

У меня есть видео HTML5, которое я использую, чтобы показать, как работает продукт. Когда каждое изображение номера щелкнуто, я хочу, чтобы оно перескочило к определенному времени в видео, а затем остановилось в определенное время.

Вот код, который я в настоящее время использую, который не работает:

<img id="stepOne" src="http://9e9.921.myftpupload.com/wp-content/uploads/2016/10/Step-1.png" /><img id="stepTwo" src="http://9e9.921.myftpupload.com/wp-content/uploads/2016/10/Step-2.png" /><img id="stepThree" src="http://9e9.921.myftpupload.com/wp-content/uploads/2016/10/Step-3.png" />

<video id="myvideo" width="300" height="150">
<source src="/videos/howitworks.mp4" type="video/mp4" />
<source src="/videos/howitworks.webm" type="video/webm=" />
Your browser does not support HTML5 video.</video>

С помощью Javascript

var myvideo = document.getElementById('myvideo')
var stepone = document.getElementById('stepOne')
var steptwo = document.getElementById('stepTwo')
var stepthree = document.getElementById('stepThree')

stepone.addEventListener("click", function (event) {
    event.preventDefault();
    myvideo.play();
    myvideo.pause();
    myvideo.currentTime = 0;
    myvideo.play();
}, false);


steptwo.addEventListener("click", function(event) {
    event.preventDefault();
    myvideo.play();
    myvideo.pause();
    myvideo.currentTime = 10;
    myvideo.play();
}, false);


stepthree.addEventListener("click", function(event) {
    event.preventDefault();
    myvideo.play();
    myvideo.pause();
    myvideo.currentTime = 32;
    myvideo.play();
}, false);

Его можно посмотреть в прямом эфире здесь .

Я ничего не добавил, чтобы остановить его, когда он попадает в определенное время, потому что этот текущий сценарий не выполняется вообще. Любая помощь будет очень признательна!

1 ответ

  1. Когда я иду на вашу страницу, Я вижу ошибку Uncaught TypeError: Cannot read property 'addEventListener' of null, поэтому, возможно, это ваша проблема 🙂

    Сценарий, скорее всего, выполняется до того, как элементы будут готовы. Попробуйте обернуть этот код в a document.addEventListener("DOMContentLoaded", function(event) {и посмотрите, исправит ли это?

    Так

    document.addEventListener("DOMContentLoaded", function(event) { 
      var myvideo = document.getElementById('myvideo')
      var stepone = document.getElementById('stepOne')
      var steptwo = document.getElementById('stepTwo')
      var stepthree = document.getElementById('stepThree')
    
      stepone.addEventListener("click", function (event) {
          event.preventDefault();
          myvideo.play();
          myvideo.pause();
          myvideo.currentTime = 0;
          myvideo.play();
      }, false);
    
    
      steptwo.addEventListener("click", function(event) {
          event.preventDefault();
          myvideo.play();
          myvideo.pause();
          myvideo.currentTime = 10;
          myvideo.play();
      }, false);
    
    
      stepthree.addEventListener("click", function(event) {
          event.preventDefault();
          myvideo.play();
          myvideo.pause();
          myvideo.currentTime = 32;
          myvideo.play();
      }, false);
    });