我有一个项目,其中有几个我想动态加载到页面中的视频。我的 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 遇到问题,需要关闭