ページに動的にロードしたいいくつかのビデオがあるプロジェクトがあります。私の 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>
このプロジェクトは Safari でのみ機能する必要があるため、MP4 ファイルのみを使用しています。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 に問題が発生したため、閉じる必要があります