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

    クイックスタート: Player カスタマイズ-レガシースキン

    このトピックでは、実践的な手順を説明します。 Brightcove Player。 外観をカスタマイズするには Brightcove Player カスケードスタイルシート(CSS)を使用する必要があります。 このドキュメントでは、最初にビデオをオーバーレイする再生ボタンの外観と位置を変更するプロセスについて説明します。

    概要

    このドキュメントには、CSSをページはめ込み埋め込みとiframe実装で使用する場合のセクションがいくつかあります。 player かなり違います。

    このドキュメントのコンテンツはChromeの開発ツールを使用していますが、現代のブラウザはすべて同等の機能を備えています。 さまざまなブラウザで開発ツールを使用する簡単な入門については、 デバッグの基礎 の資料をご参照ください。

    決定する player セレクタ

    CSSセレクターを使用すると、ページ上のHTML要素を選択して操作できます。 CSSセレクターは、ID、クラス、タイプ、属性などに基づいてHTML要素を「検索」(または選択)するために使用されます。 HTMLページの要素の外観を変更しようとするときに最初に行う必要があるのは、要素のアドレス指定に使用するセレクターを決定することです。 次の手順は、 player のサイズを変更します player.

    1. In Video Cloud Studio、Mediaモジュールを開き、公開する動画を選択します。
    2. コピー In-Page エクスペリエンス コードを公開する。
    3. HTMLエディタを使用して、新しいHTMLページを作成します。
    4. パブリッシングコードをHTMLページの本文に貼り付けます。
    5. 新しく作成したページを閲覧します。 デフォルトでは、 player デフォルトのサイズは300 x 150ピクセルです。
    6. ブラウザの開発ツールを開き、HTMLをドリルダウンして div を囲むタグ player。 あなたが表示されます div タグのクラスは video-jsとして指定することができます。 div を含む player 常にクラスがあります video-js. video-js スタイリング時に必要となるクラス名です player.
    7. 赤で強調表示されたクラスを見るには、下のスクリーンショットを確認してください。 緑色で強調表示されているのがビデオタグです。 Brightcove Player.
      player-div-with-video
    8. CSSセレクターに使用する正しいクラスがわかったので、そのクラスセレクターを使用して、 playerとして指定することができます。 style 下のブロックは、 head HTMLページのセクション CSSの用語では、これはaを使用する例です クラスセレクタ.
              <style>
                .video-js {
                  height: 344px;
                  width: 610px;
                }
              </style>
            </head>
    9. HTMLページを保存して参照すると、 player 新しいサイズです。

    再生ボタンセレクター

    別のアプローチは、再生ボタンのセレクタを見つけるために使用されます。 次の手順では、再生ボタンの正しいセレクターを見つけて、その外観を変更する方法を示します。

    1. HTMLページを参照してください。
    2. オーバーレイする再生ボタンを右クリックします player をクリックして 要素の検査.
    3. なお、 div タグは、再生ボタンを表し、 vjs-big-play-button.
      big-play-button-div
    4. スタイルを変更して、再生ボタン(17〜18行目)の色と不透明度を変更し、ボタンを中央に配置するCSSを含めます。 player (19〜23行目)。
            <style>
                .video-js {
                  height: 344px;
                  width: 610px;
                }
                .vjs-big-play-button {
                  background-color: red;
                  opacity: .3;
                  top: 0px;
                  left: 0px;
                  right: 0px;
                  bottom: 0px;
                  margin: auto;
                }
              </style>  
    5. あなたのページを閲覧すると、すべてのスタイルが使用されているとは限りません。 ボタンは赤ではありません。
      ボタンが赤でない
    6. デベロッパーツールの右側を見ると、スタイルの概要が表示されます。 あなたは見下ろすことができ、背景を赤に変えることは、それが横切って表現されることによって上書きされます。
      スタイル - 背景オーバーライド

      何が起こったのは、背景色に多くの変更が加えられたことです。 設定したスタイルは、CSSの「カスケード」部分でオーバーライドされています。 CSSの機能を利用してこれを変更することができます 特異性。 Specificityは、ブラウザによって適用されるCSSルールを決定し、カスケーディングスタイルシート(CSS)ルールの表示方法に影響を与える一種の重み付けです。 特異性を使って、あなたのスタイルを他のものよりも重要なものにすることができます。 CSSの特異性についての簡単な紹介があります カスタマイズ Player 外観-レガシースキン doc、および任意の検索で多数の参照が含まれます。

    7. なお、 div タグが囲む player 多数のクラスが関連付けられています。
      複数のクラス
    8. この場合、 video-jsvjs-mouse あなたのスタイルを優先させるために "ブースト"されます。 スタイルを変更して、新しいコンビネーションセレクターを使用します。 最初の2つのクラスの間にはスペースはありませんが、最後のクラスの前に1つのスペースが存在することに注意してください。
                .video-js.vjs-mouse .vjs-big-play-button {
                  background-color: #ff0000;
                  opacity: .3;
                  top: 0px;
                  left: 0px;
                  right: 0px;
                  bottom: 0px;
                  margin: auto;
                }
    9. ページをブラウズして、すべてのスタイルが適用されていることを確認します。
      スタイル - 背景 - 作業
    10. 再度あなたの開発者ツールの右側を見て、あなたのスタイルの要約が表示されます。 これで、背景色の変更がオーバーライドされていないことがわかりました。
      スタイル - 背景 - オーバーライドされない

    ページはめ込み埋め込み

    上記のセレクターとスタイルを操作する場合、結果は、ページ内埋め込みの実装で使用されました。 playerここに示すように、

          <!doctype html>
          <html>
          
          <head>
              <meta charset="UTF-8">
              <title>Embed in page tester</title>
             <style>
              .video-js {
                height: 344px;
                width: 610px;
              }
              .video-js.vjs-mouse .vjs-big-play-button {
                background-color: red;
                opacity: .3;
                top: 0px;
                left: 0px;
                right: 0px;
                bottom: 0px;
                margin: auto;
              }
             </style>
          </head>
          <body>
          
            <video
              data-video-id="4443311217001"
              data-account="1507807800001"
              data-player="30a9c9e0-295b-4102-a7af-a3f86bba91ab"
              data-embed="default"
              class="video-js" controls></video>
            <script src="//players.brightcove.net/1507807800001/30a9c9e0-295b-4102-a7af-a3f86bba91ab_default/index.min.js"></script>
          
          
          </body>
          </html> 

    これは、HTMLページでCSSを使用する非常に一般的な方法です。 あなたは style ブロックはページにあります video タグ。

    IFRAME

    驚くことではないiframe実装は、 Brightcove Player iframe内でHTMLページに配置します。 iframeを含むページのスタイルを使用して実際のiframe自体をスタイルしたり、サイズを変更したりできますが、iframeのページ上のスタイルはiframe自体にカスケードしません。 iframeは文字通り別のHTMLページを取得するので、iframeのコンテンツの望ましいスタイルはiframeのHTMLページに関連付けられなければなりません。

    iframe実装で Brightcove PlayerCSSを適用する手順は次のとおりです。

    • インターネットアクセス可能なファイルにスタイルを配置する
    • スタイルシートを player (使用して完了 Studio または Player Management API)
    1. In Studio、ビデオを公開し、iframe実装のコードをコピーします player.
    2. HTMLページでは、ページはめ込みコードをiframeコードに置き換えます。
    3. 変更 .video-js クラスセレクタを使用した要素セレクタへの変換 iframe 要素として。 離れる widthheight 同じ、ここに示すように:
        iframe {
            height: 344px;
            width: 610px;
          }
    4. HTMLページが次のようになっていることを確認します。
            <!doctype html>
            <html>
            <head>
              <meta charset="utf-8">
              <title>iframe tester</title>
            
               <style>
                iframe {
                  height: 344px;
                  width: 610px;
                }
                .video-js.vjs-mouse .vjs-big-play-button {
                  background-color: red;
                  opacity: .3;
                  top: 0px;
                  left: 0px;
                  right: 0px;
                  bottom: 0px;
                  margin: auto;
                }
               </style>
            <body>
            
              <iframe src='//players.brightcove.net/1507807800001/30a9c9e0-295b-4102-a7af-a3f86bba91ab_default/index.html?videoId=4443311217001'
                allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
            
            </body>
            </html>
    5. ページを閲覧すると、iframeが表示されます player 正しいサイズです。 前述のように、ボタンのスタイルは機能しません。
    6. 名前のついたファイルを作成する customize-qs.css インターネットにアクセス可能な場所に保存します。
    7. ボタンのスタイルをカットし、ファイルに貼り付けて保存します。 ボタンのスタイルのみをカットします。 style タグ。 ファイルには次の内容のみを含める必要があります。
            .video-js.vjs-mouse .vjs-big-play-button {
              background-color: red;
              opacity: .3;
              top: 0px;
              left: 0px;
              right: 0px;
              bottom: 0px;
              margin: auto;
            }  
    8. HTMLページが次のようになっていることを確認します。
            <!doctype html>
            <html>
            <head>
              <meta charset="utf-8">
              <title>iframe tester</title>
            
              <style>
                iframe {
                  height: 344px;
                  width: 610px;
                }
              </style>
            <body>
            
              <iframe src='//players.brightcove.net/1507807800001/30a9c9e0-295b-4102-a7af-a3f86bba91ab_default/index.html?videoId=4443311217001'
                allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
            
            </body>
            </html>
    9. In Studio、に入る Players の作成と管理 モジュールと編集 player このクイックスタートに使用しています。
    10. 動画内で PLUGINS セクションを開き、 編集 ボタン。
    11. ストリーミングを停止する場合は上部の CSS 次のように、CSSファイルへのパスを入力します。
      studio-enter-css
    12. ナビゲーションヘッダーの 保存 あなたの変更を PLUGINS の項目を検索します。
    13. ページ上部のをクリックします。 出版 公開する player.
    14. ブラウザに戻り、ページを更新します。 公開された変更がアクティブになると、iframeに適用されたスタイルが表示されます player。 公開された変更が表示されるまでに数分かかる場合があります。

    スタイルを探索する

    このセクションでは、JSBinを使用して、スタイルを探索し、大きな再生ボタンを上に示したものよりもカスタマイズできるようにします。 気に入った外観になったら、生成されたCSSをコピーして、次のいずれかで使用できます。 player 上記の実装。

    わかりにくいかもしれない1つの問題は、ボタン内の実際の矢印がイメージではなく、フォントファミリの一部であることです。 そのため、あなたはそのサイズを font-size 使用する ems 単位として。

    JS Bin on jsbin.com

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