プレーヤー開発の基本: コード記述の準備

このトピックでは、プレーヤーを制御するコードを書くための標準的でベストプラクティスとなるテンプレートを作成する方法について学びます。

手順

Videoタグプレーヤーコードのインスタンスを HTML ページに貼り付けます。

      <video data-video-id="5831704295001"
        data-account="921483702001"
        data-player="Uj7Yz80yM"
        data-embed="default"
        data-application-id=""
        controls=""
        width="640"
        height="360"></video>
      <script src="//players.brightcove.net/921483702001/Uj7Yz80yM_default/index.min.js"></script>

id 属性を <video> タグに追加し、その値として myPlayerID を設定します。
```
      <video id="myPlayerID"
```
</body> タグの直前に <script> ブロックを追加します。
script ブロック内で、videojs.getPlayer() メソッドを使用してページ上のプレーヤーへの参照を取得します。先ほど追加した id をメソッドの引数として使用します。
```
      <script>
        videojs.getPlayer('myPlayerID')
      </script>
```

ready() メソッドを使用し、無名のコールバック関数をその引数として記述します。

      <script>
        videojs.getPlayer('myPlayerID').ready(function() {
      
        )};
      </script>

無名関数内で myPlayer という変数を宣言し、this を代入します。this は無名関数のコンテキスト内でプレーヤーを表します。
```
      var myPlayer = this;
```

完成コード

      <!doctype html>
      <html>
      
      <head>
        <meta charset="UTF-8">
        <title>Preparing to Write Code</title>
      </head>
      
      <body>
      
      <video id="myPlayerID"
        data-video-id="5831704295001"
        data-account="921483702001"
        data-player="Uj7Yz80yM"
        data-embed="default"
        data-application-id=""
        controls=""
        width="640"
        height="360"></video>
      <script src="//players.brightcove.net/921483702001/Uj7Yz80yM_default/index.min.js"></script>
      
      <script>
        videojs.getPlayer('myPlayerID').ready(function() {
          var myPlayer = this;
        )};
      </script>
      
      </body>
      
      </html>