jQueryとHTML5ビデオ - ソースを変更するonClick

Question

HTML5とjQueryを使用してインタラクティブビデオを作成する必要があります。私の目標は、以下のとおりです。

1. video1端がbutton1を表示すると、video1
2. を再生video2へonClick変化とbutton1
3. プレイvideo2
4. On Endedを隠すvideo 3
5. などにbutton 2、OnClick変化を示しますon ...

あなたに私の質問は何ですか、私は間違っていますか？ これは私のコードです。

<section> 
<video autoplay="autoplay" controls="controls" onended="testEnded()"> 
    <source id="srcWebm" src="media/Madagascar.webm"/> 
</video> 
</section> 

<section id="buttons" class="btnShow"> 
    <ul id="buttons2" hidden> 
     <li><a href="#" id="choice1" onclick="changeSrc1()">VW</a></li> 

    </ul> 
</section> 

関数testEnded()は、（HTMLに適切に連結されている）外部のシートです。 次のようにスクリプトは次のとおりです。私は実行すると

function changeSrc1() { 
    $('#srcWebm').attr('src','media/VW.webm'); 

} 

function testEnded() { 
     $('#buttons2').removeAttr('hidden'); 
    } 

はchangeSrc1()何も起こりません。私はコードをlintingしようとしました - エラーはありません...

どうすればよいですか？ ありがとう！

Answer 1

解決策が見つかりました：明らかに、jQueryは<source>の 'src'属性の変更をサポートしていません。バグ？しかし、これは

<video id="video" autoplay="autoplay" controls="controls"> 
<source id="srcWebm" src="media/Madagascar.webm"/> 
</video> 

var video = document.getElementById("video"); 
video.src = "your link here"; 

：<video> -tagからすべての子を削除し、あなたは私が何か似た作品を作るために管理している<video>ノード

Answer 2

現在IE9で私に問題を与えています。

Answer 3

に挿入する新しい<source>要素を作成するよりも、

Answer 4

このプラグインをチェックすると、便利なプロパティがいくつかあります。

ダウンロードプラグイン

http://videojs.com/

APIリファレンス

http://videojs.com/docs/api/

私はそれはあなたを助けることを願っています。