Question

在我的网站this上，我试图在视口中出现不同标题时动态地更改视频。

我正在使用具有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();

  }
})

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

1 个答案: