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


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

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

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2017/06/14 19:45:03

回答3件)

id:doubleup No.1

回答回数12ベストアンサー獲得回数4

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

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

id:pyopyopyo No.2

回答回数377ベストアンサー獲得回数98

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

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

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

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

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

  • "He"
  • "Hel"
  • "Hello"

と文字が書かれています

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 だけで済ますときもあります.知ってて損はない方法かと思います

id:t_yamo No.3

回答回数15ベストアンサー獲得回数3

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

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

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

とか。

  • id:gfik
    Javascriptでも何でも作れるもので作って、それをを実行させて、PCゲームの実況動画を撮る要領で(すみません、私はやったことないので、コメントに記載しています)録画するだけではだめなの? その録画ソフトが知りたいの? と動画に関して素人の私は思うのですが。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません