delighter回答ポイント なしウォッチ

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

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

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

• はてなアカウントでログイン
• 無料ユーザー登録

みんなの回答

• doubleup2017/06/07 21:21:22

  「Whammy」というWebMで出力してくれるライブラリは見つけましたがいかがでしょう？
  http://qiita.com/kjunichi/items/b45b564f24b4a2be83b7
  
  WebMからmp4に変換する手間がかかりますけど。

  スター

pyopyopyo2017/06/08 15:53:19

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

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

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


• imagemagickで画像に文字を描画する方法
  • http://qiita.com/hsagae/items/1b72fb9f3d6024ba46f0
• ffmpeg で連番画像からmp4を作る方法
  • http://qiita.com/livlea/items/a94df4667c0eb37d859f
  
  
  

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

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

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

スター

t_yamo2017/06/09 17:38:17

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

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

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

とか。

スター
• その他の回答を読む

この質問へのコメント

• いつか2017/06/07 19:56:33
  Javascriptでも何でも作れるもので作って、それをを実行させて、PCゲームの実況動画を撮る要領で（すみません、私はやったことないので、コメントに記載しています）録画するだけではだめなの？　その録画ソフトが知りたいの？　と動画に関して素人の私は思うのですが。

質問の情報

登録日時

2017-06-07 19:42:58

終了日時

2017-06-14 19:45:03

回答条件

1人5回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• １０年前に購入した３万円のPCが遂に壊れました。 長持ちした方でしょうか？ …coccinellab212日前
• 今2023年ですがこの今の日本の条件下で少子高齢化を解決するとしたら何か良い案がありますか?政策を実施す…寺本まこと2211日前
• 来年2024年セパのペナントレースの優勝チームと日本一になるチームは今年と同じになると思いますか?…寺本まこと1日前
• 買取アプリ「cashari」についてです cashariでリースバックした商品（ゲーム等）を仮にリース期間中に売る…匿名質問者1111日前
• 以下のサイトを見ました。 https://karapaia.com/archives/52289253.html です。 それでこれと同じパズルを…匿名質問者22日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ