Videoタグ流れている動画をコピーする

課題

仕事で関わっている動画生配信サイトの実装案件で、次のような課題がありました。

• YouTubeに似たレイアウトの動画再生ページの実装
• メインの動画プレイヤーがスクロールによって表示領域外に移動した際、サイズの小さいプレイヤーを固定表示するという要件
• 現状では1ページに video タグを2つ用意して、 src 属性には同じリソースを指定している
• これでは同じリソースに対して2度通信が発生してしまい、効率が悪い
• 2つの動画の初期化のタイミングによっては、音声（メインプレイヤーから出ている）とミニプレイヤーの映像にズレが発生してしまうことがある

解決方法

メインプレイヤーに動画を流し、小さい方のプレイヤーはその映像をコピーして canvas 要素に描き出すようにしました。

これによって通信は1度で済み、音声と映像がズレることもなくなりました。

const mainVideo = document.getElementById('main-player');
const canvas = document.getElementById('preview-canvas');
const frameRate = 1000 / 60;
setInterval(() => {
  canvas.getContext('2d').drawImage(mainVideo, 0, 0, 160, 90);
}, frameRate);