ステップ・バイ・ステップ: Players モジュールを使用したプレーヤーの作成と公開

このトピックでは、Players モジュールを使用してプレーヤーを作成し、公開する方法について説明します。
 

このトピックの手順を実行することで、以下のことができるようになります。

  • Players モジュール内をナビゲートする
  • プレーヤーを作成する
  • プレーヤーのプロパティを設定する
  • プレーヤーに表示する Video Cloud 動画 ID を渡す
  • プレーヤーをプレビューし、公開する

対象読者

Players モジュールを使用して動画を作成・公開する必要のあるすべての動画パブリッシャー。

前提条件

  • Players モジュールへのアクセス権がある Video Cloud アカウント
  • Video Cloud アカウント内に公開する動画。このクイックスタートで使用する動画はこちらからダウンロードできます。または、ご自身のコンテンツを使用することもできます
  • このクイックスタートで提供される動画を使用する場合は、Video Cloud アカウントにアップロードしてください

手順

Video Cloud Studio を使用して Brightcove プレーヤーを作成・公開するには、以下のタスクを実行します。

プレーヤーの作成

新しいプレーヤーを作成するには、以下の手順に従ってください。

  1. Video Cloud Studio にログインします。
  2. 複数のアカウントをお持ちの場合は、ページ右上のプロフィールアイコンをクリックし、プレーヤーを作成するアカウントを選択します。
    Profile menu showing the current account
  3. Players モジュールを開きます。
  4. Add Player をクリックします。
  5. プレーヤーの Name と Short Description を入力します。このクイックスタートでは、プレーヤー名を Sample Player とします。Create をクリックします。
    Add Player dialog
  6. プレーヤーがプレーヤーリストに表示されることを確認します。
    List of players showing Sample Player

Players モジュールを使用して新しいプレーヤーを作成すると、Brightcove が公開している最新のプレーヤーバージョンを使用してプレーヤーが構築されます。プレーヤーバージョンを確認するには、Players モジュールを開き、確認したいプレーヤーをクリックします。Player Version がプレーヤーヘッダーに表示されます。

Sample Player header showing Player Version

すべてのプレーヤーが同じバージョンとは限らないことに注意してください。Brightcove は Brightcove プレーヤーの開発と改善を継続しているため、新しいプレーヤーバージョンがリリースされます。デフォルトでは、すべてのプレーヤーに自動的にアップデートが適用されます。プレーヤーの自動更新を防ぐには、Update Mode 設定を Manual に設定する必要があります（プレーヤーをロックするとも呼ばれます）。詳細については、プレーヤーの更新モードとバージョンの設定をご参照ください。

プレーヤー寸法の設定

プレーヤー寸法を追加すると、iframe 埋め込みコードに幅と高さのパラメータが追加されます。寸法を空欄のままにすると、プレーヤーはページ上の任意のサイズの <div> に配置でき、そのスペースに合わせて拡大されます。プレーヤーの寸法を設定するには、以下の手順に従ってください。

  1. Sample Player をクリックして、プレーヤーのプロパティページを開きます。
  2. Overview タブで Information アコーディオンを開きます。
  3. Aspect Ratio を 16:9 に設定します。
  4. Player Width を 640 に設定します。
    Information accordion with Aspect Ratio 16:9 and Width 640
  5. Save をクリックします。

プレーヤー情報プロパティの詳細については、プレーヤー情報プロパティの設定をご参照ください。

プレーヤーの公開とプレビュー

プレーヤーを公開すると、変更が公開済みプレーヤーに反映されます。プレビュープレーヤー、公開済みプレーヤー、プレーヤー公開コードの詳細については、プレーヤー埋め込みコードの生成をご参照ください。

プレーヤーを公開するには、以下の手順に従ってください。

  1. プレーヤープロパティページの右上にある Publish Changes をクリックします。
  2. プレーヤーページ上部の Publishing Status が Published と表示されていることを確認します。
  3. Embed & Preview をクリックして埋め込みダイアログを開き、Player URL をコピーして新しいブラウザタブで開きます。動画が割り当てられていないため、プレーヤーは空の状態になります。
    Embed Player dialog with embed code and Player URL

プレーヤーへの動画コンテンツの動的割り当て

このクイックスタートでは、URL パラメータを使用して Video Cloud 動画 ID をプレーヤーに動的に割り当てます。これを行うには、以下の手順に従ってください。

  1. Media モジュールを開き、公開する動画を見つけます。動画 ID は動画リストの ID 列に表示されます。
    Media module video list showing video IDs
  2. 動画 ID をクリップボードにコピーします。
  3. プレビュープレーヤーのタブに戻ります。表示する動画 ID を動的に渡すには、URL の末尾に以下を追加して Enter キーを押します。
    ?videoId=your video id

    完全な URL は次のようになります。

    https://players.brightcove.net/1486906377/Ctzra7vEL_default/index.html?videoId=5798846643001
  4. 動画が表示されることを確認します。

スタイリングプロパティの設定

スタイルプロパティは、プレーヤーの外観をカスタマイズするために使用します。プレーヤーのスタイリングの詳細については、プレーヤーのスタイリングをご参照ください。

スタイル設定を構成するには、Players モジュールに戻り、以下の手順に従ってください。

  1. Sample Player をクリックして、プレーヤーのプロパティページを開きます。
  2. Overview タブで Styling アコーディオンを開きます。
  3. Play Button Shape と Play Button Position を選択します。
  4. Color Theme セクションで、Play Button のカラースウォッチをクリックし、新しい色を選択します。
    Color Theme section with Play Button color swatch
  5. Save をクリックします。

プロパティページのプレビュープレーヤーには、スタイリング変更が即座に反映されます。これらの変更は下書きの更新として保存され、Publish Changes をクリックするまでは公開済みプレーヤーには表示されません。

ソーシャル共有プロパティの設定

ソーシャル共有を有効にすると、プレーヤー下部の再生ヘッドの横に共有アイコンが表示されます。これにより、視聴者はコンテンツを主要なソーシャルメディアサイトに共有できます。プレーヤーのソーシャルプロパティの設定の詳細については、プレーヤーのソーシャルプロパティの設定をご参照ください。

ソーシャル設定を構成するには、以下の手順に従ってください。

  1. Overview タブで Social アコーディオンを開きます。
  2. Enable Sharing トグルをオンにします。
    Social accordion with Enable Sharing toggle
  3. Save をクリックします。

プレーヤーのプレビュー

プロパティページのプレビュープレーヤーには、プレーヤーに加えられたスタイリングおよびソーシャルの変更が反映されます。

Sample Player properties page with preview player

プレビュープレーヤーの公開コードを生成することもできます。たとえば、マーケティング部門がプレーヤーへのすべての変更を承認する必要がある場合などです。プレビュープレーヤーの URL を送信して、変更を承認してもらうことができます。プレビュープレーヤーの公開コードを生成するには、以下の手順に従ってください。

  1. プレーヤープロパティページで Embed & Preview をクリックします。埋め込みダイアログが表示されます。
  2. Preview Player URL をクリックして、新しいブラウザタブでプレビュープレーヤーを開きます。
  3. プレビュープレーヤーはブラウザページの幅全体を占有し、プレビュープレーヤーであることを示す Brightcove ロゴオーバーレイが表示されているはずです。色の変更とソーシャル共有の変更が反映されていることを確認してください。
  4. プレビュープレーヤーを開いたまま、Players モジュールに戻ります。

最終プレーヤーの公開

プレビュープレーヤーでの変更は、変更が公開されるまで公開済みプレーヤーには反映されません。変更を公開するには、以下の手順に従ってください。

  1. プレーヤープロパティページで Publish Changes をクリックします。
  2. プレーヤーページ上部の Publishing Status が Published と表示されていることを確認します。
  3. 公開済みプレーヤーのブラウザタブに戻ります。プレビュープレーヤーには Brightcove ロゴオーバーレイが表示されていることを思い出してください。
  4. ページを更新し、色の変更とソーシャル共有設定が公開済みプレーヤーに反映されていることを確認します。変更が公開済みプレーヤーに反映されるまでに若干の遅延がある場合があります。