ブラウザ上で動画編集が可能なオープンソースアプリ「omniclip」を使って動画に字幕を付けてみた

動画編集アプリは数多くの種類が存在しますが、「動画に字幕だけを付けたい」といったちょっとした編集のために動画編集アプリをインストールするのは面倒です。「omniclip」はブラウザ上で動作するインストール不要の動画編集アプリとのことなので、実際にomniclipを使って動画に字幕を付ける編集をやってみました。

GitHub - omni-media/omniclip: Open source video editing web application
https://github.com/omni-media/omniclip

今回は、以下の動画に字幕を追加してみます。

ビワマスを釣り上げる寸前に逃げられた - YouTube

まず、以下のリンクをクリックしてomniclipを開きます。omniclipはChromeとEdgeに対応しているので、どちらかのブラウザを使ってアクセスしてください。

omniclip
https://omniclip.app/

omniclipにアクセスしてしばらく待つと、タイムラインが表示されます。このままでは使いにくいので、画面を分割して各種操作画面を追加します。

まず、画面右上の赤枠で囲ったボタンをクリック。

すると、画面が垂直方向に2分割されます。続けて、赤枠で囲った2カ所の水平分割ボタンをクリック。

画面が4分割されたら、各画面に操作画面を割り当てます。各画面には「タイムライン」「動画インポート」「プレビュー」「テキスト挿入」「動画出力」「設定」のいずれかを割り当て可能。今回は左上は初期状態のまま「タイムライン」、左下に「動画インポート」、右上に「テキスト挿入」、右下に「プレビュー」を割り当てます。

4分割した画面に操作画面を割り当てると、以下のような見た目になります。

次に、動画インポート画面の「Import Multimedia」をクリック。

ファイルダイアログが表示されたら編集したい動画を探してダブルクリック。

編集したい動画がインポート画面に表示されたら、右下の＋ボタンをクリック。

すると、動画がタイムラインに追加されます。初期状態だとタイムラインのズーム倍率が大きすぎるので、虫眼鏡ボタンをクリックしてズーム倍率を下げます。

こんな感じにタイムラインに動画の全体が表示されればOK。

次に、字幕を追加するためにテキスト挿入画面に用意された「example」の右下にある＋ボタンをクリックします。

するとタイムラインにテキストが追加されます。タイムラインに追加された赤色のバーが「字幕が表示されるタイミングおよび長さ」を表しています。赤色のバーをドラッグ＆ドロップですることで字幕の表示されるタイミングや長さを調整できます。

続いて、テキストを編集するために黄色いバーをテキストの上に動かします。

テキストを選択した状態で黄色いバーをテキストの上に動かすと、プレビュー画面にテキストの編集画面が表示されます。

テキスト編集画面ではテキストの内容やフォントサイズ、色などを編集できるほか、テキストの位置も調整できます。なお、フォントの種類は記事作成時点では「Arial」しか選べません。

必要なテキストを挿入したら、最後に動画を出力します。まず、動画出力画面を表示するために、いずれかの画面を閉じるか、画面を分割して新たな操作画面を追加する必要があります。今回はプレビュー画面左上の×ボタンをクリックしてプレビュー画面を閉じました。

続いて「Export」をクリックして動画出力画面を表示します。

動画出力画面が表示されたら「Export」をクリック。

すると、動画の出力が始まるのでしばらく待ちます。

出力が完了したら「Save」をクリック。

動画の保存先を指定して、名前を付けて「保存」をクリックしたら動画編集は完了です。なお、動画の出力形式はMP4で、解像度は「854×480」「1280×720」「1920×1080」「3840×2160 」から選択可能です。

編集した動画が以下。omniclipを使えば、動画編集アプリをインストールせずともブラウザ上で動画を編集できるため、ちょっとした編集が必要な際に便利です。

ブラウザで動作する動画編集アプリ「omniclip」で字幕を追加した動画 - YouTube

◆フォーラム開設中
本記事に関連するフォーラムをGIGAZINE公式Discordサーバーに設置しました。誰でも自由に書き込めるので、どしどしコメントしてください！Discordアカウントを持っていない場合は、アカウント作成手順解説記事を参考にアカウントを作成してみてください！

• Discord | "ちょっとした動画編集にはどんなアプリを使ってる？" | GIGAZINE(ギガジン)
https://discord.com/channels/1037961069903216680/1244588012231327829