动态更改HTML 5自动播放的视频源

Question

在我的网站https://cravydev.netlify.com上，当不同的标题出现在视窗中时，我会尝试动态地改变视频。

我使用的是一个带有HTML5自动播放和循环属性的div，但还不能更改视频源并在屏幕上显示特定标题时再次加载。以下是详细信息。

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();
} 

})；

编辑

多亏了Kley comment，我才能解决这个问题。现在的问题是，js逻辑不会不断地检查标题的视口可见性，而只检查一次。此外，视频在滚动时播放，海报图像也会出现，这让整个体验有点奇怪。

有什么建议可以解决这个问题吗？

谢谢!

Answer 1

检查页面，它不是viewport ()

我可以告诉你，你每次滚动src的时候都会改变src，这会导致视频重新启动。您必须进行验证，如果已经更改，则不应再次更改src。

请注意，当# headline3向上一点时，# headline2不可见。

您必须向下滚动到页面末尾才能输入此条件。

您可以在每个#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();

  }
})