Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@mimonelu

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

More than 1 year has passed since last update.

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

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
mimonelu
Front-end engineer.

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?