人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

テキスト(Javascriptなど)で動画をプログラムしてmp4として出力するには、どうすれば良いでしょうか?

音楽に合わせ、主に文字やちょっとした図形・アイコンなどを装飾したり動かしたりしたいのですが、AviUtl(の拡張編集)やAegisub(のKaraoke Template)などのソフトで地道にやっていくのは少々限界を感じてしまっています。
テキストエディタで動画を作りたく思っています。

(例えば)HTMLのcanvasあたりに描画したものをmp4に変換できれば楽そうなのですが……
何か良い方法はないでしょうか?
このご時世ですがActionScript(FLASH)とかが良いのでしょうか?

●質問者: delighter
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● doubleup

「Whammy」というWebMで出力してくれるライブラリは見つけましたがいかがでしょう?
http://qiita.com/kjunichi/items/b45b564f24b4a2be83b7

WebMからmp4に変換する手間がかかりますけど。


2 ● pyopyopyo

imagemagickというソフトを使ってコマ単位で静止画像を作成して,
それを ffmpeg というソフトを使って動画(MP4)に変換するのが楽だと思います

imagemagickもffmpegもコマンドラインで起動できるソフト (CUI)ですので
プログラムは windowsなら bat ファイル
macOSとかLinuxなら shellスクリプトで簡単に書けます

imagemagickとffmpegの使い方の参考になりそうなURL貼ります

とりあえず例としてテキストの動画を作って見ましたので,手順を紹介します.少し変えるだけで図形とかも描画できます

まず以下のコマンドを実行します.すると画像が三枚生成されます.画像には,それぞれ

と文字が書かれています

convert -size 320x240 xc:transparent -fill white -pointsize 36 -draw "text 30,65 'He'" frame000.jpg

convert -size 320x240 xc:transparent -fill white -pointsize 36 -draw "text 30,65 'Hel'" frame001.jpg

convert -size 320x240 xc:transparent -fill white -pointsize 36 -draw "text 30,65 'Hello'" frame002.jpg

ここでファイル名を連番にしているところがポイントです.
ffmpegを使うと,以下のコマンドを実行するだけで,この連番の画像から動画(mp4形式)が生成できます.

ffmpeg -i frame%04d.jpg -vcodec mpeg4 anim.mp4

anim.mp4が出力ファイル名です.
anim.mp4を再生すると,Helloという文字がアニメーションすることになります.この例では3コマしかないので一瞬で動画が終わってしまいますが,後はこの手順の繰り返しで画像をたくさん用意すれば滑らかさなアニメーションも作れます

私は仕事で時々 動画編集をすることがありますが,Adobeの動画編集ソフトを使うときもあれば, imagemagickと ffmpeg だけで済ますときもあります.知ってて損はない方法かと思います


3 ● t_yamo

canvasであればcaptureStreamでMediaStreamが取れませんかね。
https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/captureStream

で、MediaStreamRecorderでWAVかWebMかアニメーションgifに変換。
https://github.com/streamproc/MediaStreamRecorder

そこからmp4にするのはいろんな方法(それこそffmpegなど)でどうにか頑張って頂く。

とか。

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ