5

まず、その質問をしたいと思います。他のビデオ コンテンツがないと、メタデータを読み込めません。preload = "metadata"動かない。Win Chrome でテストしましたが、Safari/FF/IE/Opera でどのように動作するかわかりません。したがって、6 つ以上のビデオ クリップを高速にロードすることはできません。Chrome は、同様のポート/プロトコル/ドメインで開いている接続を 6 つだけ保持する場合があります。また、6 つ以上のビデオをロードすると、最後のビデオのロードが開始されず、最初の 6 つのビデオのロードが完全に完了します。

jsfiddle は必要ですか? 作成できますが、必要ないと思います。例えば。HTML: 10 個の html5<video>がそれぞれ約 100 MB とpreload=metadata属性。JS (わかりやすくするために jQuery を使用):

$('video').on('loadedmetadata',function(){
  console.log(this.duration);
}).each(function(i){
  this.load();
});

次に、Chrome Dev Tools の [ネットワーク] タブを開き、ページをリロードします。6 つの動画の読み込みが開始され、フル コンテンツが読み込まれますが、他の 4 つの動画は(pending)マーク付きで待機します。まず、コンソールに 6 つのメッセージが表示されます。最初のビデオを完全にロードすると、新しいメッセージが表示されます。

いろいろ試しましたがどれも落ちました。ここで、サーバー側でメタデータを取得することについて考えます。おそらくPHPに解決策はありますか？しかし、JS ソリューションの方が優れています。

また、YouTube、おそらく Vimeo やその他の Web サイトを使用するソリューションについても知っています。これにより、一部のサブドメイン (s1.youtube.com、s2.youtube.com など) に動画が保存されます。しかし、私はそれを使用することはできません。私はウェブサイトのテンプレートを作成していますが、いくつかの要件があります。

私はたくさんのビデオを含むビデオギャラリーを持っています。プレーヤーは、最初のビデオを再生する前に、期間を表示し、幅/高さを知っている必要があります。また、ビデオポスター用にビデオの途中からフレームを撮りたいです。ビデオの読み込みを停止し、接続を閉じるためのソリューションが必要です。そして、メタデータの取得に関する問題を実際に解決します。

4

2 に答える 2

0

Chrome で 6 つ以上の動画を読み込みたい場合は、この.webm形式を使用する必要があります。

注:ビデオ タグに多数のソースがある場合は、次のようになります。

<video width="320" height="240" controls autoplay>
    <source src="vid.webm" type="video/webm">
    <source src="vid.mp4" type="video/mp4">
</video>

mp4クロムはデフォルトで ではなくになると思いますwebm。機能させるには、jquery マジックを実行する必要があります。それに関するアドバイスはここで見ることができます。

于 2014-09-14T14:42:14.503 に答える