【Unity】タイムラインで動画に字幕を付ける #1

タイムラインで動画を再生して、字幕を付けてみました。

まず、タイムラインで動画を再生するための無料のアセットをAsset Storeで「My Asset」に追加して、Package Managerでインポートしました。

コンポーネントを設定

ヒエラルキーウィンドウでVideo Playerオブジェクトを追加します。

タイムラインウィンドウを表示して、このオブジェクトを選択中にタイムラインウィンドウの「Create」ボタンを押しました。

すると、「Video Player」コンポーネントと「Playable Director」コンポーネントが追加されました。同じオブジェクトに付ける必要はありません。

Video Playerコンポーネントでは、Sourceを「Video Clip」にして、Video Clipに動画ファイルをドラッグアンドドロップします。

また、Render Modeを「Camera Near Plane」にして、Cameraにメインカメラをアタッチしました。これで、カメラの近面に動画が表示されます。

タイムラインで動画を再生する

Playable Directorコンポーネントの付いたオブジェクトを選択して、タイムラインウィンドウの左側の何もないところで右クリックし、「Video Script Playable Track」を作ります。

このトラックを右クリックして、「Add From Video Player」から上のビデオプレイヤーを選択します。

すると、クリップが作られて動画が再生されるようになります。

クリップと動画の長さを揃える

Projectウィンドウで動画のアセットを選択すると、インスペクタの下部にプレビューが表示されます。

ファイル名の表示されたドロップダウンメニューから「Source Info」を選択すると、動画の情報が表示されます。

Durationの項目で、動画の長さを確認できます。

タイムラインウィンドウのクリップを選択して、インスペクタで「Duration」の「s」にこの秒数の値を入れると、クリップが同じ長さになります。

タイムラインの終了位置を動画に合わせる

タイムラインの終了位置が動画のクリップの端からズレているときは、目盛りを右クリックして、「Based On Clips」を選択します。

すると、タイムラインが一番右にあるクリップと同時に終わるようになりました。

タイムラインでテキストを切り替える

この動画に付ける字幕用のテキストオブジェクトをヒエラルキーウィンドウで追加します。

テキストのインスペクタでは、表示位置を調節しておきます。Textは空欄にしました。

「Playerable Director」コンポーネントの付いたオブジェクトを選択して、タイムラインの左側の何も無いところを右クリックし、「Text Switcher Track」を選択します。

作られたトラックの欄に上のテキストオブジェクトをドラッグアンドドロップします。

右クリックからクリップを作ります。

このクリップやクリップの端をドラッグすることで、字幕の出るタイミングや長さを変えられます。

また、クリップを選択すると、インスペクタでテキストの色やサイズ、表示内容を変えられます。

タイムラインの再生ボタンを押しても動画は流れないようです。シークバーを置いたところで、プレビューボタンを押すと、その時点の静止画がゲームビューに表示されるので、なんとかタイミングを合わせられました。

これで、タイムラインで動画に字幕を付けられました。

しかし、クリップごとにテキストの表示位置を変えられないのが難点です。

動画を読み込んでからタイムラインを再生する

ビデオプレイヤーが再生すると、まずコンテンツをプリロードするなどの準備が行われます。タイムラインを再生すると、この準備が終わる前にタイムラインが進み初めてしまうようです。

そこで、念の為にビデオプレイヤーの準備が終わってからタイムラインを再生できるようにしてみました。

まず、はじめのゲームオブジェクトにスクリプトを付けました。また、「Video Player」コンポーネントと「Playable Director」コンポーネントの「Play On Awake」を切ります。

「Playable Director」コンポーネントでは、さらにWrap Modeを「Hold」にします。

スクリプトでは、はじめにVideoPlayer.Prepareメソッドを呼びます。準備が終わってVideoPlayer.isPreparedがtrueになると、タイムラインを再生します。

using UnityEngine;
using UnityEngine.Video;
using UnityEngine.Playables;
 
public class VideoPlayTest : MonoBehaviour
{
    VideoPlayer player;
    PlayableDirector director;
 
    bool prepared;
 
    private void Awake()
    {
        // コンポーネントを取得
        player = GetComponent<VideoPlayer>();
        director = GetComponent<PlayableDirector>();
    }
 
    // Start is called before the first frame update
    void Start()
    {
        // ビデオプレイヤーを準備
        player.Prepare();
    }
 
    // Update is called once per frame
    void Update()
    {
 
        // 準備ができたら
        if(!prepared && player.isPrepared)
        {
            prepared = true;
            director.Play();
        }
 
    }
}