問題

私は現在、私のhtml-pageに2つのビデオ要素を持っています。
または どちらも同じURLからまったく同じ.mp4ビデオを埋め込みます。

ブラウザに両方のビデオをダウンロードさせるのではなく、最初のビデオ要素からレンダリングされたビデオを複製するようにブラウザに指示する方法はありますか?

再生する前に別のバッファリング時間があり、ビデオが毎回同期されないため、2つのビデオがロードされていることがわかります。

私のコード:

 <video autoplay id="previewVideo" data-videoid="JYpUXXD4xgc">
    <source src="video.php?videoid=JYpUXXD4xgc" type="video/mp4"/>
</video>

<video autoplay id="bigVideo"     data-videoid="JYpUXXD4xgc">
    <source src="video.php?videoid=JYpUXXD4xgc" type="video/mp4"/>
</video>
 

  ベストアンサー

これは、JavascriptとCanvas要素を介して非常に簡単な手順で実行できます。

HTML:

 <video autoplay id="previewVideo" data-videoid="JYpUXXD4xgc">
    <source src="video.php?videoid=JYpUXXD4xgc" type="video/mp4"/>
</video>    
<canvas id="bigVideo"></canvas>
 

Javascript:

 document.addEventListener('DOMContentLoaded', function(){
  var v = document.getElementById('previewVideo');
  var canvas = document.getElementById('bigVideo');
  var context = canvas.getContext('2d');
  var cw = Math.floor(canvas.clientWidth);
  var ch = Math.floor(canvas.clientHeight);
  canvas.width = cw;
  canvas.height = ch;
  v.addEventListener('play', function(){
      updateBigVideo(this,context,cw,ch);
  },false);
},false);


function updateBigVideo(v,c,w,h) {
    if(v.paused || v.ended) return false;
    c.drawImage(v,0,0,w,h);
    setTimeout(updateBigVideo,20,v,c,w,h);
}
 

キャンバスはビデオの画像を取得し、BigVideoに再度表示します。
または updateBigVideo()関数は20msごとに呼び出され、約50 FPSのフレームレートになります。

もっと読む: http://html5doctor.com/video-canvas-magic/

  同じタグがついた質問を見る

javascripthtmlhtml5video