はじめに

Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart3です。
Video.jsの公式のガイドであるVideo.js Guidesを翻訳ツールを使いながら解説していきます。

前回はVideo.jsの用意する埋め込みタグ種別紹介を解説したのですが、そこでVideo.jsの初期化について触れました。
ところで初期化とは何なのか、何が起きているかを調べてみましょう。

前回
Video.js完全マニュアル part2 〜Video.jsの埋め込みタグ種別紹介〜

part1から読む人はこちら

この記事の対象者

Video.jsを利用する人
動画プレイヤーのUI操作をしたい人
動画再生関連のサービスを作りたい人
Video.jsの初期化により何が起きているか知りたい人

この記事の解説する章

この記事は公式のガイドには無い初期化により何が起きているか調査した番外編のような内容です

前提

Video.jsバージョン

2022年12月最新の7.20.3を利用しています

初期化で何が起きているのか？

きっかけは私がVideo.jsの用意するスタイルシートを読み込まずにVideo.jsの初期化を行った時でした。

以下のようにvideo-jsタグを利用して、video.jsのライブラリをスクリプトのみ読み込んでdata-setup属性を利用して初期化してみます。

<head>
    ...
    <!-- スタイルシートは読み込まない -->
    <!-- <link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" /> -->
    <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
</head>

<body>
    <video-js id="video1" controls data-setup='{}'>
        <source src="https://vjs.zencdn.net/v/oceans.mp4">
    </video>
</body>

すると以下のように表示されました

謎のボタンや文字が表示されましたね…
下にも続いているので全体を見てみましょう。

追加された要素一覧全体

以上が追加された要素の全体になります。

追加された要素の機能確認

例えばPlayというボタンをクリックしてみます。

予想通り、動画が再生されてCurrent Timeの項目が動き出しました。
つまりPlayというボタンが再生ボタンとしての機能を持つことが分かります。

スタイルシート読み込み有り無しの比較

スタイルシートを読み込んでいる時の再生ボタンと、読み込んでいない時の再生ボタンの要素のclassを比較してみます。

みて分かるように同一のクラスを持つことが分かります。

(結論)初期化で何が起きているのか？

以上のことから、私はVideo.jsの初期化することで何が起きているかを以下のように考えました。

Video.jsのプラグインを読み込み、必要な要素を設置して初期化を行う
↓
用意した要素が動画と動画操作機能を持つ要素と置き換わる
↓
Video.jsの用意したスタイルシートを読み込むことで、動画操作機能を持つ要素にCSSが適用されてどの環境でも同じ見た目になる

Video.jsを初期化することで何が起きているか。まずはこれくらいの理解でもいいと思いました。

Twitterもやってます