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);

自己紹介

はじめまして

2017年5月からフリーランスエンジニアになった @yosket87 です。 今はエージェント経由で紹介してもらった常駐先でお仕事をしつつ、昔勤めていた会社から単発のお仕事をいただいたりして生計を立てています。

この半年ほど、フリーランスとしてフリーランスらしく自由に生きるにはどうすればいいかを考えてきました。 いろいろなブログ記事を読み漁ったり、本も数冊読みましたが、そのすべてに「フリーランスでやっていくならブログを始めるべき」ということが書かれていました。

• お小遣い稼ぎができるかもしれない
• ついでに文章を書く力もつくかもしれない
• WordPressの勉強を兼ねて
• なんとなく面白そうだから

このような理由でこれまで何度もブログを初め、必ずすぐに飽きて辞めてきました。

今まではWordPressでブログを構築するところから始めて、記事を書くことよりもブログ自体の実装やデザインばかりに気を取られていたので、今回は記事を書くことだけに集中できるように、はてなブログでのスタートです。

今回がこれでもう何度目かもわからないスタートですが、また懲りずに始めてみようと思います。

よろしくお願いします。