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进入视图时，视频应该更改，当div 3或4进入视图时，视频应该再次更改为其他内容。这是我需要根据它修改的代码。

$(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

您不能像使用功能.html()那样直接替换HTML，而是根据HTML specification

动态修改源元素及其属性元素已插入视频或音频元素将没有效果。

但是你可以尝试按照文档的建议来改变正在播放的内容，只需直接使用媒体元素上的src属性并使用函数.load();

以下工作示例：

var btn = document.getElementById('btn'),
    player = document.getElementById('phonevideo'),
    source = document.getElementById('src');
btn.addEventListener('click', function(event) {
  player.pause();
  source.src = 'http://html5demos.com/assets/dizzy.mp4'; // change video
  player.load(); // load it
});

<div class="phone" align="center">
  <div class="phone-inner">
    <video width="100%" height="100%" autoplay="" loop="" muted id="phonevideo">
      <source id="src" src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
    </video>
  </div>
</div>
<button id="btn" type="button">Change Video!</button>

在你的例子中使用jQuery（未经测试）：

   var player = $('#phonevideo');
   player.find("source").attr("src", "http://html5demos.com/assets/dizzy.mp4");
   player[0].load();

Answer 2

试试这段代码：

$('#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()

Answer 3

我已经优化了您的代码。我已经为你的div添加了一个类并使用了data属性。这是一个有效的jsfiddle。

<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 id="first" class="view" data-vid-src="vid/1.mp4"></div>
<div id="two" class="view" data-vid-src="vid/2.mp4"></div>
<div id="three" class="view" data-vid-src="vid/3.mp4"></div>
<div id="four" class="view" data-vid-src="vid/4.mp4"></div>
<div id="five" class="view" data-vid-src="vid/5.mp4"></div>
<div id="six" class="view" data-vid-src="vid/6.mp4"></div>

为了看到一些结果，我添加了一些css：

.phone {
  position: fixed;
  height: 200px;
  width: 120px;
  background: white;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -60px;
}

.view {
  height: 500px;
}

#first {
  background: red;
}

#two {
  background: yellow;
}

#three {
  background: green;
}

#four {
  background: blue;
}

#five {
  background: pink;
}

#six {
  background: black;
}

现在是jQuery的一部分。

function getCurrentElement(pos) {
  var len = $('.view').length;
  var i = 0;
  var old_pos;
  var ele_pos;
  var old_ele;
  var return_ele;
  $('.view').each(function(){
    i++;
    offset = $(this).offset();
    ele_pos = offset.top;
    if(pos == ele_pos) {
      return_ele = $(this);
      return;
    }
    else if(ele_pos > pos && old_pos < pos) {
      return_ele = old_ele;
      return;
    }
    else if(ele_pos < pos && i == len) {
      return_ele = $(this);
      return;
    }
    old_pos = ele_pos;
    old_ele = $(this);
  });
  return return_ele;
}
var old_ele = null;
$(window).scroll(function() {
  var cur_pos = $(window).scrollTop();
  current_element = getCurrentElement(cur_pos);
  if(old_ele != null) {
    if(current_element.attr('id') != old_ele.attr('id')) {
      $('#phonevideo source').attr('src',current_element.attr('data-vid-src'))
    }
  }
  old_ele = current_element;
});

我希望这段代码可以帮到你。：）

在滚动条上更改视频标记的视频

3 个答案: