複数の同じビデオを表示<video>タグ

Question

私は、いくつかのパターンを使用して連結された複数の他のビデオで構成されたビデオ（コンポジットビデオと呼ぶ）を持っています。一つのメイン、大きな、ビデオを：しかし、私はそれを異なって表示する必要が

：たとえば、それぞれ2および他の4つのビデオ、作曲、以下のビデオのスクリーンショットを見ますN-1ビデオのサムネイル。Nは動画の総数です。私は私の方が大きいのdivにしたいビデオを配置するHTMLとCSSの組み合わせを使用していますメインを表示するには

：ここでは上記の動画に対応し、この他の表示があります。コンポジットビデオのビデオの数に関係なく、スムーズに動作します。サムネイルを表示するには

、私は私がしたい部分を描画する<canvas>を使用しています：

video.addEventListener('play', function() { 
    (function loop() { 
    drawThumbnails(); 
    setTimeout(loop, 1000/30); // drawing at 30fps 
    })(); 
}, false); 

function drawThumbnails() { 
    for (var i = thumbs.length - 1; i >= 0; i--) { 
    drawThumbnail(thumbs[i]); 
    }; 
} 

function drawThumbnail(thumb) { 
    var thumbNumber = Number(thumb.id.match(/\d+/g)); 
    var canvasContext = thumb.getContext('2d'); 
    var thumbCoordinates = getVideoCoordinates(thumbNumber); 
    var srcX = thumbCoordinates.column * videoWidth; 
    var srcY = thumbCoordinates.row * videoHeight; 

    canvasContext.drawImage(
     video, srcX, srcY, videoWidth, videoHeight, // Source 
     0, 0, thumb.width, thumb.height); // Destination 
} 

それは3（時には4）動画のためによく働いていました。しかし、コンポジットビデオのビデオの数が増えると、サムネイルのビデオが凍結して滑らかに動かなくなります。これはおそらく、あまりにも多くの画像処理が同時に行われているために起こります。

私はそれを行う適切な方法は、どういうわけか、<video>とビデオのための特定の方法を使用して、イメージではないと思う。また、複数の<video>タグ（サムネイルごとに1つ）に同じsrcタグを使用しようとしましたが、eventListenersを追加すると、メインビデオの再生/一時停止後にサムネイルでビデオを再生/一時停止します。これはあまり効率的ではありません。特に、ビデオのシーク/バッファリングが時々同期外れすることがあります。

複数の<video>タグに1つのビデオしか使用しない方法はありますか（私の場合、メインビデオを含むもの）のみを使用して他のすべてを制御しますか？場合は、それを行う方法はありませんが、私の問題のための代替のアプローチはありますか？

どうもありがとう、

P.S.私の状況では、複数の別々のビデオを選ぶことはできません。入力ビデオを処理して複数のビデオに分割するには、非常に時間がかかります。

Answer 1

複数の動画要素で同じ動画を確実に参照できます。オリジナルを複製してサムネイルビデオとして追加すると、退屈なことが軽減される可能性があります。

サムネイルを繰り返して表示すると、再生前にメインビデオのcurrentTimeに設定している限り、ドリフトを最小限に抑えることができます。配信しようとしている正確な経験に応じて、メインビデオやサムネイルでcanplayが起動するのを待つ必要があります。

各サムネイルに親コンテナが指定されている場合は、サムネイルとして機能するビデオ要素を配置して、見たいビデオの部分のみが表示され、残りの部分がクリッピングされるようにすることができます。

FWIW、CSS maskingは、合成のパフォーマンスに役立つ場合は、パフォーマンスの最適化として関心があります。

すべてのビデオ要素の再生/一時停止を手動で調整する必要がありますが、すべての「リンクされた」ビデオ要素の再生一時停止を処理するファサードオブジェクトで行うのは簡単です。

Answer 2

メインビデオのフォーマットは何ですか？それはオンデマンドのmp4/webmファイルですか？

フレームをつかんでペイントするのではなく、パフォーマンスの問題に直面している場合は、重い作業にウェブワーカーを使用することを検討してください。 Hereウェブワーカーとのビデオ/キャンバス操作の例をいくつか見つけることができます。

Answer 3

私は遅く投稿していることを知っており、すでに回答を見つけている可能性があります。しかし、他の誰かがこの質問に遭遇した場合、私の答えは次のとおりです。

同じソースで複数のビデオ要素を使用できます。それを行う方法はCSSを使用しています。私は右上のビデオをしていた、とそれぞれが250ピクセルで250ピクセルだった場合

.wrapper { 
    height: /*height of one video*/; 
    width: /*width of one video*/; 
    overflow: hidden; 
} 
video { 
    position: relative; 
    top: /*height offset*/; 
    left: /*width offset*/; 
} 

そして

<div class="wrapper"> 
    <video src="myvideo.mp4"></video> 
</div> 

だから、HTML、私は私のラッパーheightと250pxからwidthとに私のビデオtopを設定します0pxと私のビデオleft〜250px