2012-04-23 20 views
2

私は、私が動的にページにロードしたいいくつかのビデオがあるプロジェクトを持っています。私の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> 

このプロジェクトはSafariでのみ機能する必要があるため、私はMP4ファイルのみを使用しています。私は2つのJSのソリューションを試してみたとの両方が別々の問題

JSがソースタグのsrc属性を更新しますが、ビデオをロードしません。このバージョンでは、溶液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; 
}); 

を生成するように見えます。このバージョンのビデオ負荷で

ソリューション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で問題が発生した

+0

[HTML5のビデオタグにソースを変更]の可能な重複(http://stackoverflow.com/questions/5235145/changing-source-on-html5 -video-tag) – Blazemonger

答えて

0
を終了する必要があります、次のエラーでクラッシュ戻るボタンをクリックしてください

代わりに、インナーチャイルドソースタグのvideoタグを変更してみてください:

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

0

まず、CHECあなたのvideo_source_linkvideo_source_linkが正しい場合は、document.getElementById("video").play();を削除することをおすすめします。または、controls preloadの動画タグを削除しますか?そして、以下のコードは私のために働く。

HTML

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

JS

$('#video_path').attr('src', 'path'); 
$('video').load(); 
関連する問題