HTML5 видео настройка начала и конца видео с его зацикливанием

Asar
На сайте с 23.08.2004
Offline
330
241

Имеем что-то такое для проигрывания видео на странице:

<video src="/somedir/somevideo.mp4#t=10,100" width="640" autoplay loop playsinline muted></video>

Все бы хорошо, видео начинает показываться с 10 секунды и заканчивает 100 секундой, но вот loop после 100 секунды не срабатывает (хочется, чтобы после 100 секунды шел автоматический возврат на 10 секунду и повтор воспроизведения). Вероятно, без JS не обойтись, но понятного решения не нашел, а сам я в JS совсем малограмотный. Помогите, люди добрые, чувствую, решается оно без того, чтобы в видеоредакторе собственно файл кромсать. Мож, делал кто уже такое чудо?

M5
На сайте с 28.04.2018
Offline
63
#1
Asar :

Имеем что-то такое для проигрывания видео на странице:

autoplay loop playsinline muted></video>

Все бы хорошо, видео начинает показываться с 10 секунды и заканчивает 100 секундой, но вот loop после 100 секунды не срабатывает (хочется, чтобы после 100 секунды шел автоматический возврат на 10 секунду и повтор воспроизведения). Вероятно, без JS не обойтись, но понятного решения не нашел, а сам я в JS совсем малограмотный. Помогите, люди добрые, чувствую, решается оно без того, чтобы в видеоредакторе собственно файл кромсать. Мож, делал кто уже такое чудо?

Попробуйте 

<video src="/somedir/somevideo.mp4#t=10,100" width="640" muted playsinline autoplay="autoplay" loop="loop"></video>
Asar
На сайте с 23.08.2004
Offline
330
#2
Man500 #:

Попробуйте 

Нет, от этого не зависит. И autoplay, и loop обрабатываются, но только не для отрезка (loop)...
ZEEW
На сайте с 03.06.2018
Offline
73
#3

Вы правы, для зацикливания видео с определённого промежутка времени потребуется JavaScript. Атрибут loop сам по себе работает только для полного видео, а при использовании фрагментов через #t=10,100 зацикливание не учитывает указанные временные рамки.

Вот решение с использованием JavaScript, которое позволит зациклить воспроизведение видео между 10 и 100 секундами:

<video id="myVideo" src="/somedir/somevideo.mp4" width="640" autoplay playsinline muted></video>

<script>
  const video = document.getElementById('myVideo');
  const startTime = 10;
  const endTime = 100;
  
  // Устанавливаем начальное время воспроизведения
  video.addEventListener('loadedmetadata', function() {
    video.currentTime = startTime;
  });
  
  // Проверяем текущее время и возвращаемся к началу, если достигли конца
  video.addEventListener('timeupdate', function() {
    if (video.currentTime >= endTime) {
      video.currentTime = startTime;
    }
  });
  
  // Запускаем воспроизведение
  video.play();
</script>

Как это работает:

  1. Мы создаём видеоэлемент с уникальным ID
  2. После загрузки метаданных видео устанавливаем начальное время воспроизведения
  3. Во время воспроизведения постоянно проверяем текущее время, и когда оно достигает или превышает конечное время, сбрасываем его на начальное
  4. Запускаем воспроизведение

Важно отметить, что обработчик события timeupdate срабатывает несколько раз в секунду (но не на каждом кадре), поэтому в зависимости от частоты обновления, видео может на долю секунды превысить конечное время перед возвратом к началу. Для большинства случаев это незаметно, но если вам нужна абсолютная точность, можно использовать более сложные решения с requestAnimationFrame .

Это решение должно работать во всех современных браузерах и не требует редактирования самого видеофайла.

Asar
На сайте с 23.08.2004
Offline
330
#4
Да, я тоже сделал в результате с JS. Смысл примерно такой же.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий