动态为<video>标签分配视频URL后无法播放问题咨询

图片修改src后浏览器会自动发起资源请求并渲染，但<video>标签的<source>属性更新后，浏览器不会自动检测并加载新资源——这就是两者的核心差异。要让视频即时显示，你需要手动触发视频的加载流程。

修正方案1：更新<source>后触发加载 #

修改你的代码，在更新source的src后，调用原生视频元素的load()方法，再触发播放：

<script>
jQuery(function() {
  // 获取原生video DOM元素
  const videoEl = jQuery('#the-video')[0];
  // 更新source的src
  jQuery('#the-video').children('source').attr('src', 'the-video-url.mp4');
  // 让浏览器重新加载视频资源
  videoEl.load();
  // 尝试播放（注意：浏览器自动播放策略可能要求用户先交互）
  videoEl.play().catch(err => {
    console.log('自动播放失败：', err);
    // 可以在这里添加提示，让用户手动点击播放
  });
});
</script>

<video id="the-video" width="320" height="240">
    <source src="" type="video/mp4">
    Your browser does not support the video tag.
</video>

修正方案2：直接设置<video>的src（更简洁） #

如果你的视频只有一种格式，不需要通过<source>做兼容性适配，可以直接给<video>标签设置src，浏览器会自动触发加载，写法更简单：

<script>
jQuery(function() {
  const videoEl = jQuery('#the-video')[0];
  jQuery('#the-video').attr('src', 'the-video-url.mp4');
  videoEl.play().catch(err => {
    console.log('自动播放失败：', err);
  });
});
</script>

<video id="the-video" width="320" height="240">
    Your browser does not support the video tag.
</video>

关键注意点 #

• 浏览器的自动播放策略：现代浏览器默认禁止无用户交互的自动播放（带音频的视频），如果play()方法报错，建议添加一个播放按钮，让用户手动触发播放。
• 确保视频URL正确：检查the-video-url.mp4是有效路径，避免跨域或资源不存在的问题。

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