今回は、BrightcoveのVideo.jsライブラリを使用して動画を再生し、その後HLS形式に変換する方法を紹介します。
この方法では、<video-js>タグが<video>タグに変換され、さらにHLS形式で動画が再生されるようになります。

 

まず、以下のスクリプトを確認してみてください：

(function () {
  //video-js2hls.js
  let timerNMJA = 0;
  let convertPlayer = function () {
    //... (省略)...
  };
  //ウィンドウロード時のイベント呼び出し登録
  window.addEventListener('load', function (e) {
    convertPlayer();
  });
})(); ///function

 

スクリプトの全体的な動作は、ウィンドウのロードイベントが発生したときにconvertPlayer関数を呼び出すというものです。ここでは、主要な関数convertPlayerの詳細を見てみましょう。

 

この関数convertPlayerは、以下のステップを実行します：

let convertPlayer = function () {
  if (timerNMJA) clearTimeout(timerNMJA);
  timerNMJA = setTimeout(() => {
    //BrightcoveのVideo.jsライブラリを読み込みます。
    var playerScript = document.createElement('script');
    playerScript.src = "https://players.brightcove.net/4824244762001/default_default/index.min.js";
    document.head.appendChild(playerScript);
    //すべてのvideo-js要素を取得
    var videoJsElements = document.querySelectorAll('video-js');

    //各video-js要素に対する処理
    videoJsElements.forEach(function (element) {
      //video-js プレーヤーが準備できるまで待つ
      var checkPlayer = setInterval(function () {
        var myPlayer = videojs(element.id);
        if (myPlayer !== undefined) {
          //video-js プレーヤーが準備できたら、loadstart イベントリスナーを追加
          myPlayer.on('loadstart', function () {
            var mediainfo = myPlayer.mediainfo;
            var sources = mediainfo.sources;

            //ソース情報からHLSのURLを探します。
            for (var i = 0; i < sources.length; i++) {
              var src = sources[i];
              if (src.type === 'application/vnd.apple.mpegurl') { //HLSのマニフェストURLのMIMEタイプは通常これです。
                //元のvideo-js要素を取得
                var oldElement = document.getElementById(element.id);
                //新しいvideo要素を作成
                var newElement = document.createElement('video');
                newElement.id = oldElement.id;
                newElement.className = 'hls-js videcker-casset';
                newElement.setAttribute('data-hls', src.src);
                newElement.setAttribute('playsinline', '');
                newElement.setAttribute('loop', '');

                //元のvideo-js要素と新しいvideo要素を入れ替え
                oldElement.parentNode.replaceChild(newElement, oldElement);

                //新しく作成したビデオ要素にhls.function.jsを適用
                var hlsScript = document.createElement('script');
                hlsScript.src = "js/hls.function.js";
                document.head.appendChild(hlsScript);
                break;
              }
            }
          });
          //setIntervalをクリア
          clearInterval(checkPlayer);
        }
      }, 100); //100ミリ秒ごとにチェック
    });
  }, 300);
};

 

1. BrightcoveのVideo.jsライブラリを読み込みます。
2. ページ内の全てのvideo-js要素を取得します。
3. 各video-js要素に対し、Video.jsプレーヤーが準備できるまで待ちます。
4. プレーヤーが準備できたら、loadstartイベントリスナーを追加します。このリスナーは、ソース情報からHLSのURLを見つけ出します。
5. HLSのURLが見つかったら、元のvideo-js要素を新しいvideo要素と置き換えます。
6.最後に、新しく作成したvideo要素にHLS.jsの処理を適用します。
以上で、BrightcoveのVideo.jsライブラリを使用してHLS形式の動画を再生する方法の説明を終わります。
こうした処理を通じて、動画の再生がよりスムーズになり、またブラウザ間の互換性も向上します。
みなさんもぜひ試してみてください！