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

    ステップバイステップ: 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. 選択する player ビデオを再生したいもの。
    3. をセットする サイジング, アスペクト比 と player サイズ。
    4. コピー 高度な コードを公開する。
    5. HTMLエディタを使用して、新しいHTMLページを作成します。
    6. パブリッシングコードをHTMLページの本文に貼り付けます。
    7. 新しく作成されたページを参照します。
    8. ブラウザの開発ツールを開き、HTMLをドリルダウンして <video-js> タグ。 あなたが表示されます <video-js> タグには名前も付けられたクラスがあります video-jsとして指定することができます。 <video-js> タグのクラスは常に video-js。 あなたが利用します video-js スタイリング時にクラスを頻繁に player.
    9. 下のスクリーンショットをチェックして、クラスが赤で強調表示されていることを確認してください。 緑色で強調表示されているのは <video-js> タグは、もちろん、 Brightcove Player.
      player セレクタ

    再生ボタンセレクター

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

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

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

    7. この場合、 video-js クラスはスタイルを「ブースト」して優先します。 新しい組み合わせセレクターを使用するようにスタイルを変更します。 最後のクラスの前に1つのスペースがあることに注意してください(理由の詳細は、特異性の規則で見つけることができます)。
      <style>
        .video-js .vjs-big-play-button {
          background-color: #ff0000;
          opacity: .3;
        }
      </style>  
    8. ページをブラウズして、すべてのスタイルが適用されていることを確認します。
      スタイルの背景作業
    9. 再度あなたの開発者ツールの右側を見て、あなたのスタイルの要約が表示されます。 これで、背景色の変更がオーバーライドされていないことがわかりました。
      スタイルの背景がオーバーライドされない

    高度なコード実装

    上記のセレクターとスタイルを使用する場合、結果は、 playerここに示すように、

    <!doctype html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>Untitled Document</title>
      <style>
        .video-js .vjs-big-play-button {
          background-color: red;
          opacity: .3;
        }
      </style>
    </head>
    
    <body>
    
      <video-js data-account="1507807800001"
        data-player="default"
        data-embed="default"
        controls=""
        data-video-id="6065136830001"
        data-playlist-id=""
        data-application-id=""
        width="640" height="360">
    
      </video-js><script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
    
    </body>
    
    </html>

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

    注:CSSの経験に応じて、上記のコードで id 属性を <video-js> タグ。 次に、次のようなセレクタを使用できます。 #myPlayer .vjs-big-play-button。 実際に、あなたは持っていることができ、それはうまくいったでしょう。 問題は、IDセレクターを使用して作成されたCSSがiframeを使用すると機能しないことです。 player 実装なので、既存のクラス名のみが使用されました。 を使用しないことによって id 属性、スタイルはiframeに直接適用されます player 実装

    標準コードの実装

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

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

    • インターネットアクセス可能なファイルにスタイルを配置する
    • スタイルシートを player (使用して完了 Studio または Player Management API)

    注:以下の手順では、前の手順で完了し、上のコードスニペットに示したHTMLから作業することを前提としています。 実例としてこれを保持したい場合は、コードを別のファイルにコピーして、新しいファイルで次の手順を開始してください。

    1. In Studio、ビデオを公開し、iframe実装のコードをコピーします player.
    2. HTMLページでは、ページはめ込みコードをiframeコードに置き換えます。
    3. HTMLページが次のようになっていることを確認します。
      <!doctype html>
      <html>
      
      <head>
        <meta charset="UTF-8">
        <title>Untitled Document</title>
        <style>
          .video-js .vjs-big-play-button {
            background-color: red;
            opacity: .3;
          }
        </style>
      </head>
      
      <body>
      
      <iframe src="https://players.brightcove.net/1507807800001/default_default/index.html?videoId=6065136830001"
        allowfullscreen=""
        allow="encrypted-media"
        width="640" height="360"></iframe>
      
      </body>
      
      </html>
    4. ページを参照すると、ボタンのスタイルが使用されていないことがわかります。
    5. 名前のついたファイルを作成する customize-qs.css インターネットにアクセス可能な場所に保存します。
    6. ボタンのスタイルをカットし、ファイルに貼り付けて保存します。 ボタンのスタイルのみをカットします。 <style> タグ。 ファイルには次の内容のみを含める必要があります。
      .video-js .vjs-big-play-button {
        background-color: red;
        opacity: .3;
      }
    7. HTMLページが次のようになっていることを確認します。
      <!doctype html>
      <html>
      
      <head>
        <meta charset="UTF-8">
        <title>Untitled Document</title>
      </head>
      
      <body>
      
      <iframe src="https://players.brightcove.net/1507807800001/default_default/index.html?videoId=6065136830001"
        allowfullscreen=""
        allow="encrypted-media"
        width="640" height="360"></iframe>
      
      </body>
      
      </html>
    8. In Studio、に入る Players の作成と管理 モジュールと編集 player このクイックスタートに使用しています。
    9. ナビゲーションヘッダーの プラグイン 左側のナビゲーションメニュー。
    10. ナビゲーションヘッダーの スタイルシート、 そうして スタイルシートを追加する ボタンをクリックし、パスを入力します:
      スタジオはcssを入力
    11. ナビゲーションヘッダーの 保存 変更を保存します。 プレビュー player ページの右側にあるが更新され、ボタンに適用されているCSSスタイルが表示されます。
    12. 公開するには player、クリック 公開と埋め込み>変更の公開.
    13. 開いているダイアログを閉じるには、 閉じる.
    14. ブラウザに戻り、ページを更新します。 公開された変更がアクティブになると、iframeに適用されたスタイルが表示されます player。 公開された変更が表示されるまでに数分かかる場合があります。

    スタイルを探索する

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

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

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


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