プレーヤー開発の基本：カスタムプラグイン - コードの変換

このトピックでは、Brightcove プレーヤーを制御するコードをカスタム プラグインに変換する方法を学びます。
 

手順

これらの手順は、単一の HTML ページ上で Brightcove プレーヤーを拡張するコードをすでに作成していることを前提としています。

  1. JavaScript と CSS の空ファイルを作成します。ベストプラクティスとして、ファイル名はプラグインの機能を反映したものにします。このビデオでは、back-forward-buttons.js と back-forward-buttons.css が使用されています。
  2. HTML ページ内の CSS コードを、<style> タグを除いてコピーし、専用の CSS ファイルに貼り付けます。
  3. HTML ページ内の JavaScript コードを、<script> タグを除いてコピーし、専用の JavaScript ファイルに貼り付けます。
  4. JavaScript ファイル内で、次のようなコードを探します。 
      videojs.getPlayer('myPlayerID').ready(function () {
    これを以下のように置き換えます。プラグインの機能を反映した名前を選びましょう。 
      videojs.registerPlugin('backForwardButtons', function() {
  5. 元の HTML ページから <style> ブロックを削除し、CSS ファイルへのリンクに置き換えます。 
      <link href="back-forward-buttons.css" rel="stylesheet">
  6. 元の HTML ページで、プレーヤーの index.min.js ファイルを読み込む <script> タグの直下に、プラグインの JavaScript ファイルを読み込む 2 つ目の <script> タグを追加します。 
      <script src="back-forward-buttons.js"></script>
  7. 元の HTML ページから <script> ブロックの内容を削除し、次のようなコードに置き換えます。このコードは以下を実行します。
    • getPlayer() および ready() メソッドを使用してプレーヤーへの参照を取得し、無名のイベント ハンドラー関数を設定します。
    • イベント ハンドラー関数内で、this キーワード（このコンテキストではプレーヤーを表します）を使用して myPlayer という変数に代入します。
    • プラグインを呼び出します。
      <script>
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.backForwardButtons();
    });
  </script>

完成したコード

メイン HTML ページ

      <!doctype html>
      <html>
    
      <head>
        <meta charset="UTF-8">
        <title>Untitled Document</title>
      <link href="back-forward-buttons.css" rel="stylesheet">
      </head>
    
      <body>
    
        <video id="myPlayerID"
          data-video-id="5992439742001"
          data-account="1752604059001"
          data-player="default"
          data-embed="default"
          data-application-id=""
          controls=""
          width="640" height="360"></video>
        <script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script>
        <script src="back-forward-buttons.js"></script>
    
        <script>
          videojs.getPlayer('myPlayerID').ready(function() {
            var myPlayer = this;
            myPlayer.backForwardButtons();
          });
        </script>
    
      </body>
    
      </html>

カスタム プラグインの JavaScript

      videojs.registerPlugin('backForwardButtons', function() {
        var myPlayer = this,
            jumpAmount = 5,
            controlBar,
            insertBeforeNode,
            newElementBB = document.createElement('div'),
            newElementFB = document.createElement('div'),
            newImageBB = document.createElement('img'),
            newImageFB = document.createElement('img');
    
        // +++ 後で要素操作を行うためのIDを割り当てる +++
        newElementBB.id = 'backButton';
        newElementFB.id = 'forwardButton';
    
        // +++ 要素にプロパティを設定し、親要素に追加する +++
        newImageBB.setAttribute('src', '/assets/samples/back-forward-buttons/back-button.png');
        newElementBB.appendChild(newImageBB);
        newImageFB.setAttribute('src', '/assets/samples/back-forward-buttons/forward-button.png');
        newElementFB.appendChild(newImageFB);
    
        // +++ コントロールバーを取得し、要素を挿入 +++
        controlBar = myPlayer.$('.vjs-control-bar');
        // コントロールバー内でボタンを挿入する対象要素を取得
        insertBeforeNode = myPlayer.$('.vjs-volume-panel');
    
        // ボタンの div を適切な位置に挿入
        controlBar.insertBefore(newElementBB, insertBeforeNode);
        controlBar.insertBefore(newElementFB, insertBeforeNode);
    
        // +++ クリックイベントリスナーを追加して前後にスキップ +++
        // 巻き戻しボタンの処理（再生時間が負の値にならないようにする）
        newElementBB.addEventListener('click', function () {
          var newTime,
              rewindAmt = jumpAmount,
              videoTime = myPlayer.currentTime();
          if (videoTime >= rewindAmt) {
            newTime = videoTime - rewindAmt;
          } else {
            newTime = 0;
          }
          myPlayer.currentTime(newTime);
        });
    
        // 早送りボタンの処理（動画の長さを超えないようにする）
        newElementFB.addEventListener('click', function () {
          var newTime,
              forwardAmt = jumpAmount,
              videoTime = myPlayer.currentTime(),
              videoDuration = myPlayer.duration();
          if (videoTime + forwardAmt <= videoDuration) {
            newTime = videoTime + forwardAmt;
          } else {
            newTime = videoDuration;
          }
          myPlayer.currentTime(newTime);
        });
      });

カスタム プラグインの CSS

      #backButton img{
        margin-top: -7px;
        height: 45px;
        width: 45px;
        cursor: pointer;
      }
      #forwardButton img{
        margin-top: -7px;
        height: 45px;
        width: 45px;
        cursor: pointer;
      }