0

ビデオプレーヤーをすべてのブラウザで動作させようとしています。複数のビデオがあり、デモ リールをクリックするたびにビデオが再生され、ビデオ 1 をクリックすると他のビデオが再生されます。すべてのブラウザーで両方を機能させるにはどうすればよいですか? これが私のhtmlとjavascriptです

html

<video id="myVideo" controls autoplay></video>
    <div>
        <a href="#" onClick="changeVid1();">Demo Reel</a></div>
    <a href="#" onClick="changeVid2();">video 1</a></div>

    </div>

JavaScript

function changeVid1() {
    var changeStuff = document.getElementById("myVideo");
     changeStuff.src = "video/demoreel.mp4"

}

function changeVid2() {
    var changeStuff = document.getElementById("myVideo");
     changeStuff.src = "video/video1.mp4";

}
4

1 に答える 1

0

ビデオのソースを切り替えた後、それを実行.load()して新しいファイルを強制的にロードする必要があります。また、すべてのブラウザでサポートされているビデオ コーデックがないため、複数の形式を提供する必要があります。

まず、ソースを次のように設定します。

var sources = [
    {
        'mp4': 'http://video-js.zencoder.com/oceans-clip.mp4',
        'webm':'http://video-js.zencoder.com/oceans-clip.webm',
        'ogg':'http://video-js.zencoder.com/oceans-clip.ogv'
    }
    // as many as you need...
];

次に、スイッチ関数は次のようになります。

function switchVideo(index) {
    var s = sources[index], source, i;
    video.innerHTML = '';
    for (i in s) {
        source = document.createElement('source');
        source.src = s[i];
        source.setAttribute('type', 'video/' + i);
        video.appendChild(source);
    }
    video.load();
    video.play(); //optional
}

ここで動作するデモを参照してください。

これにより、ブラウザーはさまざまな形式のリストを試してみることができます。気に入った URL が見つかるまで、各 URL を調べます。各ソース要素に "type" 属性を設定すると、事前にブラウザにビデオのタイプが通知されるため、サポートしていないビデオをスキップできます。それ以外の場合は、サーバーにアクセスしてヘッダーを取得し、そのファイルの種類を特定する必要があります。

これは、ogg/theora ファイルを提供する限り、3.5 までさかのぼる Firefox でも機能するはずです。また、ページには一度に 1 つのビデオ要素しかないため、iPad でも機能します。ただし、自動再生は、ユーザーが少なくとも 1 回手動で再生をクリックするまで機能しません。

追加のクレジットとして、html5 ビデオをサポートしていない古いブラウザーの場合、ソース タグの後に、ビデオ要素にフラッシュ フォールバックを追加できます。(つまり、IE < 9 - ただし、jQuery または別の shim を使用して置き換える必要がありますaddEventListener。)

于 2012-12-05T20:42:36.360 に答える