【Webアプリ】自動で動画にテロップを追加

【Webアプリ】自動で動画にテロップを追加アイキャッチアプリ
アプリどうが
この記事は約4分で読めます。

恭賀新年
寒さ厳しき折いかがお過ごしでしょうか
みな様方のご健勝を心よりお祈り申し上げますと共に
2023年も変わらぬご厚誼の程よろしくお願いいたします。

スポンサーリンク

動画にテロップ(字幕)を自動で配置していこう!

動画制作などで地味に面倒な作業としてテロップ(字幕)を付けるってのがあります。

実際作業するときなどはまずテンプレート作って、動画にテキスト流し込んで、時間(フレーム)の調整して~……。なんかをやっていくものだったりしますよね。

場合によってはローワーサード(テキストの土台)なんかも必要だったり……。

――っとまぁ、そこまでじゃなくても、

簡素なデザインの物であれば、わざわざ動画編集のアプリケーション(AfterEffectsやPremierepro)なんかを起動するよりも早く、あっという間にテロップ作業が終わっちゃうんじゃないかと思うわけで。
今回のを作ってみました。
※AfterEffectsやPremiereproの編集ソフトを持っていなくてもてもテロップ付できちゃうんです!

まずは準備

まずはベースとなる動画を用意してください。

制限

アップロードできる動画は以下の制限を掛けています。
・mp4・avi・mov 形式の動画である
・動画のデータサイズが32MB以内である

今回は最終的に出力される動画データは、aviとmovどちらかとなりますのでご了承ください。
また、あまりデータサイズが大きい動画は処理が停止する可能性がありますので、できれば小さい動画でよろしくです(のちのち様子見て改善予定)

テロップの情報をcsvデータで準備しよう

あとはテロップの情報。つまりは「字幕の文言」や、「表示開始の時間」、「非表示にする時間」をまとめたものをcsvデータで準備します。

csvデータ見本

A列 ”文言” :字幕の文言(改行はできません)を書いてください
B列 ”StartTime” :左の文言の表示されるタイミングの数値を秒表記で記載
C列 ”EndTime” :表示している文言が非表示になるタイミングの数値を秒表記で記載

注意事項としては2行目から記載してください。(1行目は表記されません)
上の画像だと、動画が始まり1秒のタイミングで”ここにせりふをかいてください”が表示され、3秒のタイミングで非表示になります(文言は2秒間表示される)

可能であれば上記のテンプレートを使って頂けると確実かと思います。

webアプリへアクセス!

準備が出来ましたら以下のリンクよりWebアプリにアクセスしてください。

webアプリにアクセス!!

あとはアプリの指示に従い、動画とcsvをアップデートをし、テロップ位置や使用するフォントなどの設定を送信ください。

動画の尺の長さやサイズによっては時間がかかる場合があります。
変換が終了したら自動的に遷移しますので、遷移先で出力された動画をダウンロードしてください。

テロップについて

テロップは表示位置の調整、文字色と透明度、フォントのサイズ、境界線の幅と色および透明度が調整できます。
全てのテロップが同じ設定になるので複数設定することは出来ません。

テロップ表示位置について

テロップは一度に表示する文字のサイズの中央の位置を基準に、中央揃えで表示されます。

“テロップ表示位置”の座標は上記の基準の位置を示しています。
初期状態では動画の横幅中央、縦高さの78.6%あたりに設定されています。

左下の”Clear”ボタンについて

動画やcsvのアップ後に左下にある”Clear”ボタンを押すと、アップしたデータを削除して最初の状態に戻すことが出来ます。リセットボタンってやつですね。



おわりに

現状はとりあえず、動画出力できるかと思いますが、上にも書いてますがサイズが大きいものは処理が止まる可能性がありますのでご容赦ください。
他にも調整したいところや使いやすさ的なところでの変更も考えてはいますので暇なときにちょくちょく更新はする予定です。
何か不具合とかあればコメントして頂けると助かります。すぐに対応できるかはわかりませんが。

またPaaSの”フリープラン”の範囲で稼働してますのでその辺りはご留意頂けると助かります。


コメント