javascript - 如何使用jquery onclick更改元素的src

Question

我有一个视频播放器，我希望在点击它们时在其上方显示一些 anchor ，视频的 src 已更改。我怎样才能做到这一点？按偏好不刷新页面

所以它应该是这样的:

<a href="#">Video 1</a> <!-- load video1.mp4 -->
<a href="#">Video 2</a> <!-- load video2.mp4 -->
<a href="#">Video 3</a> <!-- load video3.mp4 -->

<video class="myVideo" controls preload="auto" width="600" height="350" >
  <source src="video1.mp4" type="video/mp4" /> <!--this src should be changed by onclick-->
</video>

Answer 1

为您的标签和视频设置数据属性。然后你就可以做

<a class="videoLink" href="#" data-url="video1.mp4" >Video 1</a> <!-- load video1.mp4 -->

然后用脚本

$(".videoLink").click(function(e){
  e.preventDefault();
  $('#myVideo source').attr('src', $(this).attr("data-url"));
})

注意:

某些浏览器在更改 src 后可能不会更改视频。在这种情况下，您需要对它们调用加载函数。

$('#myVideo').load();