[javascript] html5動画タグのソースを変更する



6 Answers

Modernizrは私の魅力のように働いた。

私がしたことは、 <source>使わなかったことです。 どうにかして、このビデオは、初めてload()が呼び出されたときにのみ動作したので、これはうまくいきません。 代わりに、私はvideoタグの中でsource属性を使いました - > <video src="blabla.webm" /> Modernizrを使ってブラウザがサポートしているフォーマットを判断しました。

<script>
var v = new Array();

v[0] = [
        "videos/video1.webmvp8.webm",
        "videos/video1.theora.ogv",
        "videos/video1.mp4video.mp4"
        ];
v[1] = [
        "videos/video2.webmvp8.webm",
        "videos/video2.theora.ogv",
        "videos/video2.mp4video.mp4"
        ];
v[2] = [
        "videos/video3.webmvp8.webm",
        "videos/video3.theora.ogv",
        "videos/video3.mp4video.mp4"
        ];

function changeVid(n){
    var video = document.getElementById('video');

    if(Modernizr.video && Modernizr.video.webm) {
        video.setAttribute("src", v[n][0]);
    } else if(Modernizr.video && Modernizr.video.ogg) {
        video.setAttribute("src", v[n][1]);
    } else if(Modernizr.video && Modernizr.video.h264) {
        video.setAttribute("src", v[n][2]);
    }

    video.load();
}
</script>

うまくいけば、これはあなたを助ける:)

Modernizrを使いたくない場合は、いつでもCanPlayType()使用できます。

Question

私はどこでも動作するビデオプレーヤーを構築しようとしています。 これまで私は一緒に行くだろう:

<video>
    <source src="video.mp4"></source>
    <source src="video.ogv"></source>
    <object data="flowplayer.swf" type="application/x-shockwave-flash">
        <param name="movie" value="flowplayer.swf" />
        <param name="flashvars" value='config={"clip":"video.mp4"}' />
    </object>
</video>

(いくつかのサイトで見られるように、例えば皆のためのビデオなど )これまでのところ、とても良い。

しかし、私はまた、他のビデオを選択することができるビデオプレーヤーと一緒にプレイリスト/メニューのいくつかの種類が欲しい。 それらはすぐに私のプレーヤーの中で開かれるべきです。 だから私は "ビデオのソースを動的に変更する"必要があります( dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ - セクション「別の映画を見てみましょう")とjavascriptを使用します。 当面はflashplayer(とIE)の部分を忘れてみましょう。私は後でそれに対処しようとします。

私のJSは<source>タグを変更するようなものでなければなりません:

<script>
function loadAnotherVideo() {
    var video = document.getElementsByTagName('video')[0];
    var sources = video.getElementsByTagName('source');
    sources[0].src = 'video2.mp4';
    sources[1].src = 'video2.ogv';
    video.load();
}
</script>

問題は、これはすべてのブラウザで動作しません。 つまり、firefox = Oは、私が持っている問題を見ることができる素敵なページがあります: http://www.w3.org/2010/05/video/mediaevents.html : http://www.w3.org/2010/05/video/mediaevents.html

load()メソッドを起動するとすぐに(Firefoxで、気にして)、ビデオプレーヤーが死ぬ。

今私は、複数の<source>タグを使用せず、代わりに<video>タグ内のsrc属性を1つだけ使用すると、すべてがfirefoxで機能することがわかりました。

私の計画は、そのsrc属性を使用し、 canPlayType()関数を使って適切なファイルを決定することです。

私は何とかそれをやっていますか何かを複雑にしていますか?




仕様によると

要素が既にビデオ要素またはオーディオ要素に挿入されている場合、ソース要素とその属性を動的に変更することは効果がありません。 再生しているものを変更するには、メディア要素のsrc属性を直接使用してください。おそらくcanPlayType()メソッドを使用して、利用可能なリソースの中から選択します。 一般に、文書が解析された後に手動でソース要素を操作することは、不必要に複雑なアプローチです。

あなたがしようとしていることは、明らかに動作するはずがありません。




私はこの簡単な方法でこれを解決しました

function changeSource(url) {
   var video = document.getElementById('video');
   video.src = url;
   video.play();
}



私はかなり長い間これを研究しており、私は同じことをやろうとしているので、うまくいけば、これは他の誰かを助けるでしょう。 私はcrossbrowsertesting.comを使用していて、文字通りこれを人に知られているほとんどすべてのブラウザでテストしています。 私は現在Opera、Chrome、Firefox 3.5+、IE8 +、iPhone 3GS、iPhone 4、iPhone 4s、iPhone 5、iPhone 5s、iPad 1+、Android 2.3+、Windows Phone 8で動作しています。

動的に変化するソース

ビデオを動的に変更することは非常に難しく、Flashのフォールバックが必要な場合は、DOM /ページからビデオを削除して再追加して、Flashが更新されるようにする必要があります。 JavaScriptを使用して動的に変更する場合は、すべての<source>要素を完全に削除し、 canPlayTypeを使用してJavaScriptでsrcを設定し、最初にサポートされているビデオタイプの後にbreakまたはreturn 、動的に更新するのを忘れないでくださいフラッシュのMP4。 また、一部のブラウザでは、 video.load()を呼び出さない限り、ソースを変更したことを登録しません。 私はあなたが経験していた.load()問題は、 .load()を呼び出すことで修正できると思います。 ビデオ要素を削除して追加すると、削除されたビデオのバッファリングが継続されるためブラウザが遅くなる可能性がありますが、回避策あります。

クロスブラウザサポート

実際のブラウザ間の部分まで、私はVideo For Everybodyにも到着しました。 私はすでにMediaelementJS Wordpressプラグインを試しましたが、それは解決されたよりも多くの問題を引き起こすことが判明しました。 私は問題がWordpressプラグインによるものであり、実際のライブラリによるものではないと思う。 私は可能な限り、JavaScriptなしで動作するものを見つけることを試みています。 これまで私が思いついたのは、この単純なHTMLです:

<video width="300" height="150" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" class="responsive">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone.mp4" type="video/mp4" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone3g.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="561" height="297">
    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />
    <param name="flashVars" value="config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}" />
    <img alt="No Video" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="561" height="297" title="No video playback capabilities, please download the video below" />
</object>
<strong>Download video:</strong>  <a href="video.mp4">MP4 format</a> | <a href="video.ogv">Ogg format</a> | <a href="video.webm">WebM format</a>
</video>

重要なメモ

  • 最初の<source>としてMP4を検出した場合、Mac OS Firefoxはビデオを再生しようとしなくなるため、最初の<source>としてoggを置くことになりました。
  • 正しいMIMEタイプは重要な.ogvファイルはvideo/oggなく video/ogv video/oggでなければなりません
  • HDビデオをお持ちの場合、私がHD品質のOGGファイルで見つけた最高のトランスコーダはFirefogg
  • .iphone.mp4ファイルは、iPhone 4 +用で、H.264ベースライン3ビデオとAACオーディオを含むMPEG-4のビデオのみを再生します。 私が見つけた最高のトランスコーダーはHandbrakeで、 iPhone&iPod TouchのプリセットはiPhone 4+で動作しますが、iPhone 3GSを動作させるには、 video.iphone3g.mp4として追加した解像度がはるかに低いiPodのプリセットを使用する必要がありますvideo.iphone3g.mp4
  • 将来的には、 <source>要素のmedia属性を使用してメディアクエリを使用してモバイルデバイスをターゲットにすることができますが、現在の古いAppleおよびAndroidデバイスは、それを十分にサポートしていません。

編集

  • 私はまだVideo For Everybodyを使用していますが、今ではFlowPlayerを使用してFlashフォールバックを制御しています.Flowbackは、これを制御するための素晴らしいJavaScript APIを備えています。



OGGソースを上に移動してみてください。 私は気づいたことがあるFirefoxが時々混乱し、プレイしたいプレイヤー、OGG、が最初ではない。

試すだけの価値があります。




divを入れてコンテンツを更新するだけです...

<script>
function setvideo(src) {
    document.getElementById('div_video').innerHTML = '<video autoplay controls id="video_ctrl" style="height: 100px; width: 100px;"><source src="'+src+'" type="video/mp4"></video>';
    document.getElementById('video_ctrl').play();
}
</script>
<button onClick="setvideo('video1.mp4');">Video1</button>
<div id="div_video"> </div>



<source />タグを使用すると、Chrome 14.0.835.202では難しいものでしたが、FireFoxではうまく動作しました。 (これは私の知識が不足している可能性がありますが、とにかく別の解決策が役に立つかもしれないと思っていました)だから、 <video />タグを使い、ビデオタグ自体のsrc属性を正しく設定しました。 canPlayVideo('<mime type>')関数を使用して、特定のブラウザが入力ビデオを再生できるかどうかを判断しました。 FireFoxとChromeでの次の作業

ちなみに、FireFoxとChromeはともに「ogg」形式を再生していますが、Chromeでは「webm」を推奨しています。 FireFoxが最初にoggソースを優先していると言われている(つまり、 <source src="..." type="video/ogg"/> )ので、最初は "ogg"のブラウザサポートのチェックを行います。 しかし、私は、ビデオタグの "src"を設定する際に、コード内の順序がまったく違うかどうかをテストしていません(そして、疑いの余地があります)。

HTML

<body onload="setupVideo();">
    <video id="media" controls="true" preload="auto" src="">
    </video>
</body>

JavaScript

function setupVideo() {
       // You will probably get your video name differently
       var videoName = "http://video-js.zencoder.com/oceans-clip.mp4";

       // Get all of the uri's we support
       var indexOfExtension = videoName.lastIndexOf(".");
       //window.alert("found index of extension " + indexOfExtension);
       var extension = videoName.substr(indexOfExtension, videoName.length - indexOfExtension);
       //window.alert("extension is " + extension);
       var ogguri = encodeURI(videoName.replace(extension, ".ogv"));
       var webmuri = encodeURI(videoName.replace(extension, ".webm"));
       var mp4uri = encodeURI(videoName.replace(extension, ".mp4"));
       //window.alert(" URI is " + webmuri);


       // Get the video element
       var v = document.getElementById("media");
       window.alert(" media is " + v);

       // Test for support
       if (v.canPlayType("video/ogg")) {
            v.setAttribute("src", ogguri);
           //window.alert("can play ogg");
       }
       else if (v.canPlayType("video/webm")) {
           v.setAttribute("src", webmuri);
           //window.alert("can play webm");
       }
       else if (v.canPlayType("video/mp4")) {
           v.setAttribute("src", mp4uri);
           //window.alert("can play mp4");
       }
       else {
           window.alert("Can't play anything");
       }

      v.load();
      v.play();
  }



Related