サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

    Player 開発者の基本:カスタムプラグイン - コード変換

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

    ステップ

    これらのステップは、あなたが以下を強化するためのコードを書いたと仮定します。 Brightcove Player 単一のHTMLページ上。

    1. JavaScriptとCSS用に空のファイルを作成します。 ベストプラクティスとして、ファイル名はプラグインの機能を反映するべきです。 ビデオで back-forward-buttons.jsback-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ページから、その真下に <script> にリンクするタグ player's index.min.js ファイル、秒を追加 <script> プラグインのJavaScriptにリンクするためのタグ:
      <script src="back-forward-buttons.js"></script>
    7. 元のHTMLページから、のコンテンツを削除します。 <script> ブロックして、次のコードを実行するコードに置き換えます。
      • あなたへの言及を得る player getPlayer()ready() メソッド、それは関連する無名イベントハンドラ関数を持ちます。
      • イベントハンドラ関数で、という名前の変数を割り当てます。 myPlayer インクルード this キーワードを表す player この文脈では、
      • プラグインを呼び出します。
      <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
          class="video-js"
          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');
    
        // +++ Assign IDs for later element manipulation +++
        newElementBB.id = 'backButton';
        newElementFB.id = 'forwardButton';
    
        // +++ Assign properties to elements and assign to parents +++
        newImageBB.setAttribute('src', '//learning-services-media.brightcove.com/doc-assets/player-development/samples/back-forward-buttons/back-button.png');
        newElementBB.appendChild(newImageBB);
        newImageFB.setAttribute('src', '//learning-services-media.brightcove.com/doc-assets/player-development/samples/back-forward-buttons/forward-button.png');
        newElementFB.appendChild(newImageFB);
    
        // +++ Get controlbar and insert elements +++
        controlBar = myPlayer.$('.vjs-control-bar');
        // Get the element to insert buttons in front of in conrolbar
        insertBeforeNode = myPlayer.$('.vjs-volume-panel');
    
        // Insert the button div in proper location
        controlBar.insertBefore(newElementBB, insertBeforeNode);
        controlBar.insertBefore(newElementFB, insertBeforeNode);
    
        // +++ Add event listeners to jump back or forward +++
        // Back button logic, don't jump to negative times
        newElementBB.addEventListener('click', function () {
          var newTime,
              rewindAmt = jumpAmount,
              videoTime = myPlayer.currentTime();
          if (videoTime >= rewindAmt) {
            newTime = videoTime - rewindAmt;
          } else {
            newTime = 0;
          }
          myPlayer.currentTime(newTime);
        });
    
        // Forward button logic, don't jump past the duration
        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;
      }

    ページの最終更新日:28年2020月XNUMX日