web-dev-qa-db-ja.com

JavaScriptを使用して動画のソースを動的に変更できますか？

JSを使用してビデオのソースを変更するにはどうすればよいですか？

<video id="myVideoTag" width="670" height="377" autoplay="true" controls="controls">
    <source src="http://www.test.com/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
javascriptjqueryvideohtml5
32
March

もちろん、src要素にsource属性を設定するだけです。

document.querySelector("#myVideoTag > source").src = "http://example.com/new_url.mp4"

または、標準のDOMメソッドの代わりにjQueryを使用します。

$("#myVideoTag > source").attr("src", "http://example.com/new_url.mp4"​​​​)​
28
Brian Campbell

私はこの問題に何度か直面しましたが、以前の経験と掘り起こしに基づいて、これらのオプションを提案できます：

  • ビデオタグを完全に置き換えます

はい、新しいソースを使用して_<video>_要素を再挿入するだけです。それは簡単ですが、効果的なアプローチです。イベントリスナーを再初期化することを忘れないでください。

  • ビデオURLを割り当てる_video.src_

これは私がここで答え、stackoverflow、そしてgithubのソースでたくさん見ました。

_var video = document.getElementById('#myVideo');
video.src = newSourceURL;
_

動作しますが、ブラウザオプションから選択することはできません。

  • call.load()ビデオ要素

documentation に従って、_<video>_の_<source>_タグのsrc属性を更新し、.load()を呼び出して変更を有効にすることができます。

_<video id="myVideo">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.ogg" type="video/ogg" />
</video>

<script>
    var video = document.getElementById('myVideo');
    var sources = video.getElementsByTagName('source');
    sources[0].src = anotherMp4URL;
    sources[1].src = anotherOggURL;
    video.load();
</script>
_

それにもかかわらず ここ それはいくつかのブラウザに問題があると言われています。

これをすべて1か所にまとめることが役立つことを願っています。

16
evilguc

同じ問題に遭遇しました。このスレッドによると：

html5ビデオタグのソースを変更する

ソースタグのsrcを変更することはできません。動画タグ自体のsrcを使用する必要があります。

5
emik

私はそれがうまくいくことを望み、あなたの必要に応じて属性名とIDを調整してください

以下のhtmlコード

<video controls style="max-width: 90%;" id="filePreview">                        
    <source type="video/mp4" id="video_source">
</video>

以下のjsコード

   $("#fileToUpload").change(function(e){
        var source = $('#video_source');
        source[0].src = URL.createObjectURL(this.files[0]);
        source.parent()[0].load();
    });
0
Manoj Rana

これをチェックしてください。このjavascriptは、ソースタグのsrcを変更します。 https://jsfiddle.net/a94zcrtq/8/

<script>
  function toggle() {
            if ($(this).attr('data-click-state') == 1) {
                $(this).attr('data-click-state', 0)
                document.getElementById("source").src = "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4";
                document.getElementById("videoPlayer").load();
            } else {
                $(this).attr('data-click-state', 1)
                document.getElementById("source").src = "http://techslides.com/demos/sample-videos/small.mp4";
                document.getElementById("videoPlayer").load();
            }
        } 
</script>
0
user6701418

子source要素を動的に作成して追加するとうまくいくことがわかりました。

var videoElement = document.querySelector('.my-video');
var videoSources = ["video.mp4","video.webm"]
if (videoElement) {
    for (var i = 0; i < videoSources.length; i++) {
        var sourceTag = document.createElement("source");
        sourceTag.type = "video/" + videoSources[i].split('.')[1];
        sourceTag.src = videoSources[i];
        videoElement.appendChild(sourceTag);
    }           
}
0
Ron Royston

キャンベルは正しいソリューションを提供していますが、「コメントに記載されているように」手元にある「プレイリスト固有の」質問に対するより完全なソリューションが提供されています here 。このソリューションは、正しく実装されている場合、すべてのビデオ形式に適用できます（上記のソリューションと組み合わせて、特定のブラウザで再生するソースを検出するために modernizr を使用しました）。

このソリューションは、IE8を含むすべてのHTML5ブラウザーでHTML5ビデオタグのビデオを変更するために機能します（テスト済みです）。

0
mkralla11

これは働いています

<video id="videoplayer1" width="240" height="160" controls>
    <source id="video_res_1" src="" type="video/ogg">
</video>

そしてjavascriptで

document.getElementById("video_res_1").src = "my video url.ogv";
document.getElementById("videoplayer1").load();

重要なのは、動画プレーヤーをリロードする.load（）関数です。

0
jimver04