我有一个项目,我有几个视频,我想动态加载到页面。我的HTML是相当简单的一个视频标签如何动态替换HTML5视频src
<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遇到了问题,需要崩溃关闭
[上HTML5视频标签改变源(可能重复http://stackoverflow.com/questions/5235145/changing-source-on-html5 - 视频标签) – Blazemonger 2013-12-11 19:00:05