Функция Javascript для воспроизведения и приостановки видео

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

function videostart(id,start,end){

  var video = document.getElementsByTagName("video")[0];
  video.currentTime = start;
  video.play();

  video.addEventListener("timeupdate", function() {
  if (video.currentTime >= end) {
  video.pause();
  }}, false);

};

Этот первый вызов работает нормально, и он начинается с 0 и заканчивается на 2:24.

<a href = "#" onclick = "videostart('1759',0.00,2.24); return false;">PLAY</a>

Однако этот второй вызов начинает воспроизводиться, а затем сразу же останавливается:

<a href = "#" onclick = "videostart('1760',2.25,7.24); return false;">PLAY</a>

Если я сначала нажму на первую ссылку, она отлично работает и воспроизводит от 0 до 2,24.

Если я нажимаю вторую ссылку СНАЧАЛА, она воспроизводится нормально и также нормально останавливается.

Однако, если я СНАЧАЛА нажму на первую ссылку, а ПОТОМ нажму на вторую ссылку, она начнет воспроизводиться, а затем сразу же выключится.

В этот момент я могу вернуться и воспроизвести первую ссылку столько раз, сколько захочу, без проблем.

javascript html5-video

15.03.2019 17:23

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

404

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

`.addEventListener()` и `.removeEventListener()`

Прежде всего избегайте использования обработчиков атрибутов onevent:

<button ~~onclick = "fnc()"~~>

Вам нужно будет удалить обработчик события timeupdate, потому что он будет постоянно обновлять начальное значение end. Это означает, что .addEventListener() и .removeEventListener() необходимы.

Демо

Подробности прокомментированы в демо

/*
Register the document to the click event
When it's clicked, call function videoStart()
*/
document.addEventListener('click', videoStart);
// Declare variable
var END;
// Define function videoStart() -- pass Event Object
function videoStart(event) {
  // Reference the clicked button
  var button = event.target;
  // Get data-start value of clicked button
  var start = button.dataset.start;
  // Get data-end value of clicked button
  var end = button.dataset.end;
  // Assign value of end to END
  END = end;
  // Reference the video tag
  var video = document.querySelector("video");
  // Set time to start value
  video.currentTime = start;
  // Play video
  video.play();
  /* 
  Register video tag to timeupdate event 
  videoEnd() is the callback function
  */
  video.addEventListener("timeupdate", videoEnd);
};

// Define function videoEnd() -- pass the Event Object
function videoEnd(event) {
  // Reference the video tag
  var video = document.querySelector("video");
  /*
  if the current time is greater than or equal to END...
  pause video and remove the eventListener() so the next
  eventListener can be established according to new END
  argument.
  */
  if (video.currentTime >= END) {
    video.pause();
    video.removeEventListener("timeupdate", videoEnd);
  }
}

<video src='https://html5demos.com/assets/dizzy.mp4' width='320'></video>
<button data-start='0' data-end='3'>0 - 3</button>

<button data-start='3' data-end='5'>3 - 5</button>

Отличный ответ! Большое спасибо @zer00ne!!

— 15.03.2019 18:20

Спасибо, сэр. Удачного кодирования!

— 15.03.2019 20:29

15.03.2019 18:07