2

最新のブラウザでHTML5ビデオ機能を使用してプレイリストを作成しようとしています。

私がこれまでに見つけた唯一の方法は、ビデオタグを削除してから、以下のような別のソースを追加することです。

$("second video link").click (function(){
   $("#video wrapper").remove();
   $("#video wrapper").append(" new video tags ");
});

もっと良い方法があるに違いないと思います...

4

1 に答える 1

2

答えは、好みのアプローチと、動画を提供するブラウザーによって異なります。source サブ要素を介して複数のソースを提供した場合、IE9 は video.src() 関数で失敗します。1 つのブラウザーだけが機能する必要がある場合は、caniuse.com で webm と mp4 をチェックして、どのブラウザーがどのコーデックをサポートしているかを確認してください。視聴者が mp4 と webm 専用の両方のブラウザーを使用しているため、複数のコーデックが必要であることがわかった場合は、.src() 関数を使用する前に .canPlayType() でチェックを行い、失敗するソースを排除する必要があります (ただし、このチェックも防弾ではありません）。Android 2.2 (または 2.1 だったので訂正してください) は、その機能をまったく知りません。一部の Mac OSX ブラウザーには、同様の問題があります。

結論: canPlayType() の組み合わせを使用して間違ったソースをフィルタリングし、配列またはその他の並べ替え可能なリストを使用して次のビデオ ソースを取得し、src を使用してビデオ要素によって「終了」イベントが発生したら、それを設定する必要があります。 （） 関数。また、ソースを変更するときに video 要素の type 属性を設定して、一部のブラウザーの癖を回避することも好きです。

可能なタイプは次のとおりです。mp4 および m4v ファイルの場合は video/mp4。webm ファイルの場合は video/webm。ogv ファイルの場合は video/ogg。ある種のサーバー側スクリプトを介してタイプを提供するか、JS でファイル拡張子を確認してから、switch() {...} または if else()... を実行します。

経由で簡単に拡張機能を取得できます

var sourceExt = (sourceString.split(".")).pop();

sourceString は、ソースの URL を含む変数です

さらに、ブラウザの仕様を確認して、ビデオの要件に準拠する必要があります。たとえば iOS では、mp4 をベースライン プロファイルでエンコードする必要があります。

于 2011-12-26T12:25:24.687 に答える