如何用jQuery实现点击锚点无刷新切换Video元素的Src属性

嘿，这个需求其实挺常见的，用jQuery来实现非常直观，我给你一步步拆解：

第一步：搭建HTML结构 #

首先你得把视频播放器和切换锚点的结构写好，建议给锚点加个自定义属性（比如data-video-src）来存储对应的视频地址，这样后期维护起来更方便：

<!-- 视频播放器 -->
<video id="myVideo" controls width="640" height="360">
  <source src="default-video.mp4" type="video/mp4">
  你的浏览器不支持视频播放
</video>

<!-- 切换锚点组 -->
<div class="video-switchers">
  <a href="#" class="switch-btn" data-video-src="video-1.mp4">视频1</a>
  <a href="#" class="switch-btn" data-video-src="video-2.mp4">视频2</a>
  <a href="#" class="switch-btn" data-video-src="video-3.mp4">视频3</a>
</div>

第二步：编写jQuery逻辑 #

接下来就是核心的交互代码了，我们要给每个锚点绑定点击事件，修改视频的src属性，同时处理好视频加载的逻辑：

$(document).ready(function() {
  // 给所有切换按钮绑定点击事件
  $('.switch-btn').on('click', function(e) {
    // 阻止a标签默认的跳转行为
    e.preventDefault();
    
    // 获取当前点击按钮对应的视频地址
    const newVideoSrc = $(this).data('video-src');
    // 获取视频元素
    const $video = $('#myVideo');
    
    // 修改视频的src属性
    $video.find('source').attr('src', newVideoSrc);
    // 重新加载视频（必须调用，不然修改src后不会生效）
    $video.get(0).load();
    // 可选：自动播放新视频
    $video.get(0).play();
  });
});

几个实用的小细节 #

• 如果你需要兼容多视频格式（比如webm、ogg），可以给锚点加多个自定义属性（比如data-video-mp4、data-video-webm），然后同时修改对应的<source>标签
• 切换视频前建议先暂停当前视频，避免音频重叠：$video.get(0).pause();
• 如果要同步切换视频封面，给锚点加data-poster属性，再用$video.attr('poster', newPosterSrc)修改即可
• 注意跨域限制：如果视频托管在其他域名，要确保目标服务器配置了CORS允许你的域名访问

内容的提问来源于stack exchange，提问作者Jack Maessen