如何动态替换 HTML5 Video src答案

【问题标题】：How to dynamically replace HTML5 Video src如何动态替换 HTML5 Video src
【发布时间】：2012-04-23 19:33:59
【问题描述】：

我有一个项目，我有几个想要动态加载到页面中的视频。我的 HTML 相当简单，只有一个视频标签

<video controls preload width="520" height="350" id="video">
<source src="videos/video0.mp4" type="video/mp4" id="video_source">
</video>

<div id="playlist">
    <a href="videos/video1.mp4">Video File Tomorrow</a>
    <a href="videos/video2.mp4">Video File Tomorrow</a>             
</div>

我只使用 MP4 文件，因为这个项目只需要在 Safari 中运行。我尝试了 2 个 JS 解决方案，但似乎都产生了单独的问题

解决方案 1

$("#playlist a").click(function(){
   var video_source_link=$(this).attr("href");
   document.getElementById("video_source").setAttribute("src",video_source_link);
   document.getElementById("video").load();
   document.getElementById("video").play();
   return false;
});

在这个版本中，JS 更新了源标签的 src 属性，但不加载视频。

解决方案 2

$("#playlist a").click(function(){
       var video_source_link=$(this).attr("href");
       document.getElementById("video_source").setAttribute("src",video_source_link);
       document.getElementById("video_source").load();
       document.getElementById("video_source").play();
       return false;
});

在这个版本中，视频加载到一个空白窗口中，当我单击返回按钮时，Safari 崩溃并出现以下错误 WebKit2WebProcess.exe 遇到问题，需要关闭

【问题讨论】：

changing source on html5 video tag 的可能重复项

标签： javascript jquery html5-video

【解决方案1】：

尝试更改视频标签而不是内部子源标签：

$("#video")[0].src = $(this).attr("href");

【讨论】：

【解决方案2】：

首先，检查您的video_source_link。如果你video_source_link是正确的，我建议在灵魂1中删除这行document.getElementById("video").play();。或者删除视频标签中的controls preload怎么样？以下代码对我有用。

HTML

 <video width="320" height="240" autoplay>
   <source id="video_path" src="" type="video/mp4">
 </video>

 $('#video_path').attr('src', 'path');
 $('video').load();

【讨论】：