动态更改 HTML5 自动播放视频源

Question

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

我正在使用具有 HTML 5 自动播放和循环属性的 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 的评论，我已经能够解决它。现在的问题是 js 逻辑不会经常检查标题的视口可见性，只检查一次。另外，视频一边滚动一边播放，海报图片出现，让整个体验有点奇怪。

有什么建议可以解决吗？

谢谢！

Answer 1

查看页面，不是视口()

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

请注意，当 #headline3 稍微向上时，#headline2 不可见。

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

您可以在每个 #headline 的开头使用另一个较小的元素来执行此验证。

你可以使用#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();

  }
})