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

    カスタマイズ Player 外観-レガシースキン

    このトピックは、new / styling / customizing-の外観をカスタマイズするための入門書です。player-appearance.html player。 コンテンツはChromeの開発ツールを使用していますが、最新のすべてのブラウザは同等の機能を備えています。 さまざまなブラウザーでの開発ツールの使用に関する簡単な紹介については、 JavaScriptのデバッグの基礎 の資料をご参照ください。

    独自のスキンを作成する

    デフォルトのスキンを使用せずに独自のスキンを作成したい場合は、 Player Management APIとして指定することができます。 Player 構成ガイド 必要な情報を提供します。

    Player

    の外観を変更できます player、しかしあなたは最初にそれに対処する方法を持っている必要があります。 これを確認するには、HTMLページを player embed_in_pageコードが挿入されました。 の中に 要素 開発ツールのセクションで最初の <div> そして、あなたはそれが値を持つクラスを持っていることがわかります video-js とりわけ、割り当てられた。

    カスタマイズ-player-要素

    これがわかったら、スタイルを使用して player 自体。 たとえば、のサイズを変更するには player このスタイルを使用できます:

    <style>
      .video-js {
        width: 640px;
        height: 360px;
      }
    </style>

    IFRAME player

    のiframe実装を使用している場合 player 状況は異なります。 あなたはまだ表示されます player video-js クラスですが、もちろんiframe内にあります。

    iframe-player-要素

    作成したスタイルは、 player iframe内にありますが、CSSファイルを作成して、 player 使用して Studio。 これを行うには、 Players の作成と管理 モジュールをクリックし、CSSを関連付けるビデオをクリックしてから、 プラグイン セクションにCSSファイルのパスを追加します。

    iframe自体をカスタマイズしたい場合は、 class 属性を iframe 要素(27行目)。 この場合、クラス値は videoFrame。 次に、 <style> 必要に応じて変更するタグ。 以下の例では、 widthheight 変更されます。

    <!doctype html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>Customize iframe</title>
    
      <!-- Page styles -->
      <style>
        .videoFrame {
          width: 640px;
          height: 360px;
        }
      </style>
    </head>
    
    <body>
      <iframe class="videoFrame" src='//players.brightcove.net/1752604059001/68f30408-8fb4-431d-accb-8c5baa8c4790_default/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
    </body>
    
    </html>

    再生ボタン

    再生ボタンの外観を変更したい場合は、最初に再生ボタンの対処方法を知る必要があります。 Chromeでは、 開発ツール ボタンを右クリックして開きます。 表示される選択肢から選択 要素の検査.

    検査ボタン

    の中に 要素 開発ツールのセクションには、ボタン要素に対応するHTMLコードが表示されます。

    ビッグプレイボタン

    上記の強調表示されたコードから、ボタンに割り当てられたクラスが vjs-big-play-button。 再生ボタンの色(虎に合わせるため)と不透明度は、次のスタイルで変更されます。

      <style>
        .vjs-big-play-button {
          background-color: #B37D5B;
          opacity: .6;
        }
        .video-js {
          width: 640px;
          height: 360px;
        }
      </style>

    このアプローチは機能すると思いますが、機能しません。 CSSを使用する場合は、プロパティの特異性に注意する必要があります。 これは、ブラウザが、関連性に基づいて要素に適用されるプロパティ値を決定する方法を指します。

    ボタンの変更を適用する1つの方法は、CSSセレクタ内のIDを参照することです。 これは、idのCSS特異性が高いためです。 詳細については、 CSSの特異性 セクション

    まず、 id 属性を div 要素 player コー​​ド。

        <video-js id="video_1"
          data-account="1752604059001"
          data-player="68f30408-8fb4-431d-accb-8c5baa8c4790"
          data-embed="default"
          class="video-js" controls></video-js>
    
        <script src="//players.brightcove.net/1752604059001/68f30408-8fb4-431d-accb-8c5baa8c4790_default/index.min.js"></script>

    次に、 player次のCSSの大きな再生ボタン:

      <style>
        #video_1 .vjs-big-play-button {
          background-color: #B37D5B;
          opacity: .6;
        }
        .video-js {
          width: 640px;
          height: 360px;
        }
      </style>

    ボタンを濃いグレーからオレンジ色に変更した結果は次のとおりです。

    オレンジ色の再生ボタン

    センター再生ボタン

    次のスタイルを使用して、再生ボタンを水平と垂直の両方に合わせることができます。

    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;

    再生ボタンを隠す

    次のスタイルを使用して再生ボタンを完全に隠すことができます:

    display: none;

    実験

    次のCodePenでは、再生ボタンを試すことができます。 再生ボタンの三角形は実際にはフォントであり、そのサイズは font-size スタイル。

    ペンを見る ビッグプレイボタンのカスタマイズ Matt Boles(著)@mboles)上 コードペン.

    進行状況と音量

    この文書で最後に表示されるカスタマイズは、進行状況とボリュームのインジケータの色を変更することです。 両方のデフォルトの色は、次のようにフクシアです。

    進歩と容積

    ここでの課題は、要素のクラス名を見つけることです。 上記と同じテクニックを使用して、選択した要素を右クリックします。 要素の検査、あなたは全体の進行状況インジケータに到達することができます、次にあなたが vjs-play-progress クラス。

    Chromeで 要素 パネル、マウス div クラス名がの要素 vjs-play-progress で以下を確認するには player:

    進行制御

    Chromeのツールは、音量レベルの要素を確認するときに役立ちます。 ボリュームボタンをマウスオーバー(ホバー)すると、音量レベルが表示されます。 正しい要素を調べて見つけたときに音量を表示するには、次の手順を実行します。

    • 音量ボタンを右クリックし、それを調べる
    • ストリーミングを停止する場合は上部の トグル要素ボタン (下の青色で強調表示されている) スタイル セクション
    • チェック :ホバー ボックス( スタイル セクションを参照)、要素を検査している間にマウスをシミュレートします
    • ボリュームレベルの要素が見つかるまでドリルダウンします( 要素 セクション)
    inspect-audio-button

    今すぐ background-color これらの要素の両方のスタイリングが必要です。 ボタンと同じ色にしたいので、ここに示すようにスタイルを変更してください:

      <style>
        #video_1 .vjs-big-play-button {
          opacity: .6;
        }
        #video_1 .vjs-big-play-button,
        #video_1 .vjs-play-progress,
        #video_1 .vjs-volume-level {
          background-color: #B37D5B;
        }
        .video-js {
          width: 640px;
          height: 360px;
        }
      </style>

    各クラスの前に player's div 素子。 これは、CSSの特異性に関するクラスの変更との関連性を提供します。 これについては、次のセクションで説明します。

    結果は次のようになります。

    進歩 - ボリュームスタイル

    この入門では、スタイリングの概要を説明しています player。 これまで見てきたように、変更する要素に対応するクラス名を見つけてスタイルを設定するのがアプローチです。 で述べたように覚えてください IFRAME このドキュメントのセクション(iframeを使用している場合) player、スタイルをファイルに入れ、curlステートメントを使用してスタイルを player.

    カスタマイズを追加することがベストプラクティスであることを忘れないでください。 player 構成が最適化され、お客様と一緒に移動できるようになります player それが埋め込まれているところはどこでも。

    視認性を制御する

    コントロールが表示される期間を指定することができます。 あなたは options().inactivityTimeout これを行うプロパティ。 値は、コントロールでのアクティビティの終了後にコントロールが表示され続ける秒数に等しく設定します player。 コントロールを常に表示したままにするには、値を0に設定します。

    次のコードは、 inactivityTimeout 〜へ 0これにより、コントロールが常に表示されます。

    <video-js id="myPlayerID"
      data-account="1752604059001"
      data-player="04ee9f58-9d08-43ea-803f-abda86776db2"
      data-embed="default"
      class="video-js" controls></video-js>
    <script src="//players.brightcove.net/1752604059001/04ee9f58-9d08-43ea-803f-abda86776db2_default/index.min.js"></script>
    
    <script>
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this;
        myPlayer.options().inactivityTimeout = 0;
      });
    </script>

    コントロールバーアイコンの順序

    コントロールバーのアイコンの順序は、 order スタイルには番号が割り当てられます。 例えば、 5 進行状況バーの後、音量ボタンの前にアイコンを配置します。 9 コントロールバーの右端にアイコンが配置されます。 古いブラウザの場合、次のようにいくつかのスタイルが必要になる場合があります。

    {
      order: 5; /* after the progress bar but before the volume button */
      -webkit-box-ordinal-group: 5;
      -moz-box-ordinal-group: 5;
      -webkit-order: 5;
      -ms-flex-order: 5;
    }

    アイコンを追加する例(ここではファイルをダウンロードする場合)は、 Brightcove Player サンプル:ビデオプラグインをダウンロード の資料をご参照ください。

    CSSの特異性

    CSSの特定性とは、ブラウザーが、関連性に基づいて要素に適用されるプロパティー値を決定する方法を指します。 このコンセプトの詳細については、 特異性 記事。

    Chromeでは、大きな再生ボタンを確認します。 注意してください background プロパティは複数のクラスを使用して設定されます。 これは私たちが1つしか使用できないことを意味します .vjs-big-play-button クラスを使用してこのプロパティをオーバーライドします。

    再生ボタンクラス

    大きな再生ボタンをカスタマイズするには、次の3つの方法があります。

    • に割り当てられたIDを参照する player.
    • 複数のクラスを使用して、プロパティの関連性を高めます。
    • JavaScriptを使用して、id属性を player そしてそれをCSSで参照します。

    IDの参照

    ある id CSSの特異性に関する関連性が高く、 id CSSセレクタに background-color プロパティ。

    まだ実行していない場合は、 id 属性を video 要素は次のようになります。

        <video-js id="video_1"
          data-account="1752604059001"
          data-player="68f30408-8fb4-431d-accb-8c5baa8c4790"
          data-embed="default"
          class="video-js" controls></video-js>

    CSSでは、id値を .vjs-big-play-button クラスセレクタ。 背景色と不透明度を次のように上書きします。

      <style>
        #video_1 .vjs-big-play-button {
          background-color: #B37D5B;
          opacity: .6;
        }
        .video-js {
          width: 640px;
          height: 360px;
        }
      </style>

    ビッグプレイボタンがオレンジ色になっているはずです。

    オレンジ色の再生ボタン

    複数のクラスの使用

    から background 大きな再生ボタンのプロパティが2つのクラスを使用して設定されている場合、このプロパティをオーバーライドするには、CSSセレクタに少なくとも2つのクラスが必要です。

    加えます .video-js にクラス .vjs-big-play-button クラスセレクタ。 あなたは .video-js クラスがビデオコンテナに設定されています。

    これらの値を使用して、クラス名がすべての要素を選択する vjs-big-play-button クラス名が要素の下位である .video-js.

    <style>
      .video-js .vjs-big-play-button {
        background-color: #B37D5B;
        opacity: .6;
      }
      .video-js {
        width: 640px;
        height: 360px;
      }
    </style>

    ビッグプレイボタンがオレンジ色になっているはずです。 複数のクラスを操作するのは難しいかもしれませんし、複数の要素に影響するかもしれませんが、idは1つの要素に固有です。

    JavaScriptを使用する

    JavaScriptを使用して、大きな再生ボタンにIDを動的に追加することもできます。 次に、そのIDをCSSから参照できます。

    大きな再生ボタン要素にIDを追加するコードを追加します。

    • Line 173:クラスを持つ最初の要素への参照を取得します。 vjs-big-play-button.
    • ライン174: id 大きな再生ボタンの属性
      <script type="text/JavaScript">
    
        var playButton = document.getElementsByClassName("vjs-big-play-button")[0];
        playButton.setAttribute("id", "myPlayButton");
    
      </script>

    CSSでセレクタを変更して myPlayButton IDの名前。

      <style>
        #myPlayButton {
          background-color: #B37D5B;
          opacity: .6;
        }
        .video-js {
          width: 640px;
          height: 360px;
        }
      </style>

    ビッグプレイボタンがオレンジ色になっているはずです。


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