Динамическое изменение источника видео в HTML 5

Question

На моем веб-сайте https://cravydev.netlify.com Я пытаюсь динамически изменять видео, когда различные заголовки находятся в области просмотра.

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

HTML

<div class="iphone-sticky"></div>
  <div class="iphone-video">
     <video autoplay loop muted poster="assets/img/poster.png" id="iphonevideo">
       <source id="video1" src="assets/img/iphone-video.mp4" type="video/mp4">
       <source id="video2" src="assets/img/iphone-video-1.mp4" type="video/mp4">
       </video> 

JS

//Detect is element is in viewport
$(window).on('resize scroll', function() {
var player = document.getElementById('iphonevideo2');
if ($('#headline2').isInViewport()) {
    var source = document.getElementById('video1');
    $(source).attr("src", "assets/img/iphone-video-1.mp4");
    player.pause();
    player.load();
} else if ($('#headline3').isInViewport()) {
    var source = document.getElementById('video1');
    $(source).attr("src", "assets/img/iphone-video.mp4");
    player.pause();
    player.load();
} 

});

РЕДАКТИРОВАТЬ

Я былв состоянии решить это благодаря комментарию Клей.Теперь проблема в том, что логика js не проверяет постоянно видимость заголовков в окне просмотра, только один раз.Кроме того, видео воспроизводится во время прокрутки, и появляется изображение плаката, что делает весь опыт немного странным.

Есть какие-либо предложения по решению этой проблемы?

Спасибо!

Answer 1

Проверьте страницу, это не окно просмотра ()

Я мог бы сказать, что вы меняете src каждый раз, когда вы прокручиваете, пока он виден, это вызывает перезапуск видео.Вы должны сделать проверку, если она уже была изменена, src не должен быть изменен снова.

Обратите внимание, что # headline2 не виден, когда # headline3 немного активен.

вам нужнопрокрутите вниз до конца страницы, чтобы ввести это условие.

Вы можете использовать другой меньший элемент в начале каждой #headline, чтобы выполнить эту проверку.

вы можете использовать первое p из# заголовок

Например:

$(window).on('resize scroll', function() {
   var player = document.getElementById('iphonevideo2');
   if ($('#headline2 p').eq(0).isInViewport()) {

      var source = document.getElementById('video1');
      var url = "assets/img/iphone-video-1.mp4";
      var src = $(source).attr("src");
      // validate if you already have the src
      if(src==url) return; // if exists src leaves function

      $(source).attr("src", url);
      player.pause();
      player.load();

  } else if ($('#headline3 p').eq(0).isInViewport()) {

      var source = document.getElementById('video1');
      var src = $(source).attr("src");
      var url = "assets/img/iphone-video.mp4";
      // validate if you already have the src
      if(src==url) return; // if exists src leaves function

      $(source).attr("src", url);
      player.pause();
      player.load();

  }
})