Question

我怎样才能做到这一点，当我点击链接时，它会使用jQuery更改视频的src，

因此，如果用户点击＆＃34;＃staff＆＃34;它会改变视频src

  <ul class="nav nav-pills" >
            <li role="presentation" class="loginPills"><a id="student" href="#">Student  </a></li>
            <li role="presentation" class="loginPills"><a id="staff" href="#">Staff</a></li>
            <li role="presentation" class="loginPills"><a id="employer"href="#">Employer</a></li>
        </ul>

我的视频

<video playsinline autoplay muted loop poster="" id="bgvid">
<source src="Border-Collies.mp4" type="video/mp4" id="mp4">

我的代码（不工作）

$( document ).ready(function() {
$('#staff').on({
    'click': function(){
        $('#mp4').attr('src','The-Coast.mp4');
        $('#webm').attr('src','The-Coast.webm');
        console.log("click");
    }
});
});

谢谢！

Answer 1

您的代码工作正常，但根据规范，动态更改src属性不起作用。

阅读https://dev.w3.org/html5/spec-preview/the-source-element.html

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

Answer 2

您只需要更改视频标记的属性而不是源标记，如下所示：

替换

$('#mp4').attr('src','The-Coast.mp4');

与

$('#bgvid').attr('src','The-Coast.mp4');

Answer 3

如果您动态更改src代码的source，则需要在视频后调用.load()。

这是一个演示。

document.getElementById('change').addEventListener('click', function(e) {
  e.preventDefault();
  document.getElementById('source').src = 'http://www.w3schools.com/html/mov_bbb.mp4';
  document.getElementById('video').load();
});

a {
  display: block;
  font-size: 2em;
}

<a href="#" id="change">click</a>

<video controls id="video">
  <source src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" id="source">
</video>

当我使用JQuery单击链接时，如何更改视频src

3 个答案: