JavaScript动态切换HTML视频源的几种实现方法

在网页视频播放场景中，动态切换视频源是常见需求，比如提供多清晰度选项、剧集切换等功能都需要用到该能力。下面我们详细介绍几种通过JavaScript动态切换HTML视频源的方法。

方法一：直接修改video元素的src属性

这是最简单的实现方式，直接获取video元素后修改其src属性，然后调用load()方法重新加载视频资源即可。

// 获取video元素
const videoElement = document.getElementById('myVideo');
// 新的视频源地址
const newVideoSrc = 'https://ipipp.com/videos/test-720p.mp4';
// 修改src属性
videoElement.src = newVideoSrc;
// 重新加载视频
videoElement.load();
// 可选：加载完成后自动播放
videoElement.play().catch(err => {
  console.log('自动播放失败，需要用户交互后播放');
});

对应的HTML结构如下：

<video id="myVideo" controls width="800">
  <source src="https://ipipp.com/videos/test-480p.mp4" type="video/mp4">
  您的浏览器不支持video标签
</video>
<button onclick="switchVideo()">切换到720P</button>

这种方式的优点是逻辑简单，适合video元素直接通过src属性指定视频源的场景。但需要注意，修改src后必须调用load()方法，否则浏览器不会重新加载新的视频资源。

方法二：操作source标签切换视频源

如果video元素内部使用了<source>标签定义视频源，直接修改video的src属性可能无法生效，此时需要操作source元素的src属性。

function switchVideoBySource() {
  // 获取video元素
  const video = document.getElementById('sourceVideo');
  // 获取内部的source元素
  const sourceElement = video.querySelector('source');
  // 设置新的视频源
  sourceElement.src = 'https://ipipp.com/videos/test-1080p.mp4';
  // 重新加载视频
  video.load();
  // 播放新视频
  video.play();
}

对应的HTML结构：

<video id="sourceVideo" controls width="800">
  <source src="https://ipipp.com/videos/test-480p.mp4" type="video/mp4">
  您的浏览器不支持video标签
</video>
<button onclick="switchVideoBySource()">切换到1080P</button>

这种方式的适配性更好，因为<source>标签支持指定多个视频格式作为备选，浏览器会自动选择兼容的格式播放，适合需要兼容多浏览器的场景。

方法三：动态替换source标签切换视频源

如果需要同时切换多个视频源（比如同时提供mp4和webm格式），或者需要清空原有source标签再添加新的源，可以采用动态替换<source>标签的方式。

function replaceSourceTag() {
  const video = document.getElementById('replaceVideo');
  // 清空原有的source标签
  const oldSources = video.querySelectorAll('source');
  oldSources.forEach(source => source.remove());
  // 创建新的source标签
  const newSourceMp4 = document.createElement('source');
  newSourceMp4.src = 'https://ipipp.com/videos/test-720p.mp4';
  newSourceMp4.type = 'video/mp4';
  const newSourceWebm = document.createElement('source');
  newSourceWebm.src = 'https://ipipp.com/videos/test-720p.webm';
  newSourceWebm.type = 'video/webm';
  // 将新的source标签添加到video元素中
  video.appendChild(newSourceMp4);
  video.appendChild(newSourceWebm);
  // 重新加载视频
  video.load();
  video.play();
}

对应的HTML结构：

<video id="replaceVideo" controls width="800">
  <source src="https://ipipp.com/videos/test-480p.mp4" type="video/mp4">
  <source src="https://ipipp.com/videos/test-480p.webm" type="video/webm">
  您的浏览器不支持video标签
</video>
<button onclick="replaceSourceTag()">切换到720P（多格式）</button>

这种方式灵活性最高，可以完全控制video元素内的视频源配置，适合需要动态切换多格式视频源或者需要重置视频源列表的场景。

注意事项

• 切换视频源后必须调用video元素的load()方法，否则浏览器不会加载新的视频资源。
• 部分浏览器限制了自动播放权限，调用play()方法时建议添加错误捕获，避免报错影响页面正常运行。
• 如果视频源地址跨域，需要确保服务端配置了正确的跨域资源共享（CORS）规则，否则可能无法正常加载视频。
• 切换视频源时可以添加加载状态提示，提升用户体验，比如在加载时显示“视频加载中”的提示，加载完成后隐藏。

JavaScriptHTML_video动态切换视频源src属性修改时间：2026-05-31 22:25:44