Posted at

video 要素のスクリーンショットを撮影するブックマークレット

a.png


概要

YouTube やニコニコ動画のワンシーンを画像として保存したい時、どうしてますか?

OS のスクリーンショット機能?でも良いんですが、たいてい矩形選択する必要があるから面倒だし、きれいに選択できなかったら嫌ですよね?私は嫌です。

そこでエンジニアなりに video 要素について調べてみると(ほとんどの動画は video 要素で実装されているので)、 Canvas の drawImage 関数にそのまま渡して描画できることがわかりました。

つまり仮想 Canvas に video 要素を描画してスクリプトダウンロードするブックマークレットを作れば、ワンタッチで動画のスクリーンショットを撮影することができそうです。


コード

というわけで作ったのがこちらになります。

javascript: (() => { const video = document.querySelector('video'); if (video) { const canvas = document.createElement('canvas'); canvas.width = video.clientWidth; canvas.height = video.clientHeight; const context = canvas.getContext('2d'); context.drawImage(video, 0, 0, canvas.width, canvas.height); const image = new Image(); image.src = canvas.toDataURL('image/png'); const a = document.createElement('a'); a.download = `${location.host}_${new Date().toISOString()}.png`; a.target = '_blank'; a.href = image.src; a.click(); } else { alert('There is no video tag.'); } })(); void 0;

説明は割愛…ブックマークの URL 欄にコピペすれば OK です。

試写はこちらで行いました。ナショジオ良いですよね。


注意点


  • Chrome でしか動かないはず

  • Chrome では二回目の撮影時に複数ダウンロードの許可を求めるポップアップが表示される

  • video 要素がない場合はアラートを表示する

  • video 要素がいっぱいある場合は最初の要素だけ撮影する

  • CORS 由来のエラーで動作しない場合がある


動作確認サービス

✅ ニコニコ動画( HTML5 版のみ)

✅ ニコニコ生放送( HTML5 版のみ)

✅ Twitch

✅ YouTube

❌ Vimeo


ひとこと

360° カメラの動画を撮影したらこんなんなりました。

b.png