操作をanimated gifで撮って、youtube用のmp4に変換する

TL;DR

LICEcapでcapture(animated gif, 960×540)。ffmpegで変換(mp4, 1280×720)。youtubeにアップロード。

Capture

Macなので、LICEcap。Ubuntuだと
colinkeenan/silentcast
でイケるのかもだけど、未確認。

youtubeの仕様

先にyoutubeの仕様確認。
高度なエンコード設定 – YouTube ヘルプ

解像度とアスペクト比

YouTube ではアスペクト比が 16:9 のプレーヤーを使用します。16:9 以外のファイルをアップロードした場合、同様に正常に処理、表示されますが、プレーヤーで上下または左右に黒い帯が追加されます。プレーヤーにぴったり収めるには、以下の解像度でエンコードしてください:

2160p: 3840×2160
1440p: 2560×1440
1080p: 1920×1080
720p: 1280×720
480p: 854×480
360p: 640×360
240p: 426×240

16:9で撮って、リサイズする。960×540で撮って、1280×720 にresize。引き伸ばすなよ馬鹿かよ、って気もするがまあしかたない。

LICEcap tips

前掲gifのように、はじめに文字タイトルを入れられる。(ということを初めて知った)
ただ、これはgifだと指定ms止められるっぽいが、ffmpeg通した時に、1コマになってしまう。ので、mp4への変換は思い通り行かなかった。
animated gifで無限ループの時に、最初がわかるので、たまに便利かも。

変換 ffmpeg

ffmpeg -i do-not-merge-1.gif -an -s 1280x720 do-not-merge-1.mp4

ここでリサイズもすることにした。音声は無しを明示。あとはいい感じに自動判定する。

アップロード youtube

サムネイルは自動生成の三箇所からしか選べない。
SMS認証すると、好きなサムネイル画像をアップロードできる。好きなサムネイル(?)

Chrome webstore

chrome webstoreのスクリーンショットを上げるところに、youtubeのurlを入れられる。
スクリーンショットの左右の順番は変えられるので、右のサムネイルを左に動かす変なアイコンを押す。それで動画が初めに来るように設定する。
公開。

Markdown (GitHub)

tipsとして、embedd できない場合、画像を表示して、リンクを動画にするhackがある。
youtubeはサムネイル画像を取得するAPIがあるので、画像はそれを指定しつつ、動画にリンクすればいい。

[![Do Not Merge WIP Demo](http://img.youtube.com/vi/89jY5OuXgwU/0.jpg)](https://www.youtube.com/watch?v=89jY5OuXgwU)

Do Not Merge WIP Demo

flash – How to embed a video into GitHub README.md? – Stack Overflow

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中