javascript設定/置き換えsrc = "" on html5 video

Question

各ソースのHTMLではjavascriptを使用して、一致するソースに正しいビデオを次のように挿入したかったのです。

<script type="text/javascript"> 
var 1_video = '1.mp4'; 
var 2_video = '1.webm'; 
var 3_video = '1.ogv'; 
</script> 
<video width="320" height="240" controls="controls"> 
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --> 
<source src="" type="video/mp4" /> 
<!-- WebM/VP8 for Firefox4, Opera, and Chrome --> 
<source src="" type="video/webm" /> 
<!-- Ogg/Vorbis for older Firefox and Opera versions --> 
<source src="" type="video/ogg" /> 
</video> 

jqueryを使用していることがわかり、jqueryや外部ライブラリを使用したくない例があります。

これを行う最善の方法は何ですか。 私はこれのようなことをしますが、私はビデオとソース要素にHTML id = "idname"タグを使わずにこれを達成したいと思います。

document.getElementById('video').src = 1_video; 

お読みいただきありがとうございました、ありがとうございました。

Answer 1

あなたがそうあなたのソースにIDを追加しようと、 "ビデオ" idを持つオブジェクトを選択してみてください：あなたが持っている可能性が可能性が

<video width="320" height="240" controls="controls"> 
 
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --> 
 
<source src="" id="source-mp4" type="video/mp4" /> 
 
<!-- WebM/VP8 for Firefox4, Opera, and Chrome --> 
 
<source src="" id="source-webm" type="video/webm" /> 
 
<!-- Ogg/Vorbis for older Firefox and Opera versions --> 
 
<source src="" id="source-ogg" type="video/ogg" /> 
 
</video>

document.getElementById('source-mp4').src = 1_video; 
 
document.getElementById('source-webm').src = 2_video; 
 
document.getElementById('source-ogg').src = 2_video;

Answer 2

新しいビデオを選択するたびに、コンテナ内に新しい要素を作成することができますremoveChildを使用して古いファイルを破棄してください。

/*Destroy current element inside the container*/ 
    container.removeChild(element); 

    /*Create new element in the container*/ 
    var element = container.createElement("VIDEO"); 
    element.src = XYZ-video;