javascript - 在滚动条上更改视频标签的视频

Question

我有一个视频标签说

<div class="phone" align="center">
  <div class="phone-inner">
    <video width="100%" height="100%" autoplay="" loop="" muted id="phonevideo">
      <source src="vid/1.mp4" type="video/mp4">
    </video>
  </div>
</div>

我想在页面滚动和每次 div 更改时更改视频，例如 fueled.com。假设我有六个部门，例如

<div id="first></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>

当 div 2 进入 View 时，视频应该改变，当 div 3 或 4 进入 View 时，视频应该再次改变为其他内容。这是我的代码，需要根据它进行修改。

$(window).scroll(function() {
  var topDivHeight = $("#first").height();
  var DivTop = $("#sixth").position().top;
  var viewPortSize = $(window).height();

  var triggerAt = 450;
  var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;
  var test1 = (topDivHeight - viewPortSize) + 650;


  var count = 0;
  var number = jQuery.grep(mainTops, function(n, i) {
    if (n < $(window).scrollTop())
    {
      count++;
    }
  });

   $('.nav ul li a').css("color", "#fff");
   $('.nav ul li a#nav'+count ).css("color", "#f60");
  if($(window).scrollTop() >= triggerHeight && $(window).scrollTop() < DivTop) {
    $('.phone').css('visibility', 'visible').fadeIn();
    if($(window).scrollTop() >= test1){
      $('#phonevideo').html('<source src="vid/2.mp4" type="video/mp4">'); // tried using this method but its not working here. Some other method needed here.
    }
  } else {
    $('.phone').fadeOut();
  }
});

Answer 1

试试这段代码:

$('#phonevideo').find("source").attr("src", "https://www.w3schools.com/tags/movie.mp4");
$('#phonevideo').get(0).load();

您可以更改源属性，例如 $('#phonevideo').find("source").attr("src","videosource")

并且在更改源之后，您需要加载视频 $('#phonevideo').get(0).load()