ソーシャル共有プラグイン

例

Brightcove Player を含むウェブページがあるとします。ここで、ユーザーがソーシャルメディアプラットフォームを通じて動画を共有できるようにしたいとします。ソーシャルメディアプラグインを使用すると、タイトルおよび説明のドックにソーシャル共有アイコンが表示されます。

このアイコンをクリックすると、ここに示すソーシャル共有画面が表示されます。

プレーヤーには、次の 2 つの理由から、幅と高さを設定する必要があります:

1. 幅または高さが設定されていない場合、X に渡す値が存在せず、X カードのバリデーションが通らなくなります。
2. 幅は、上記のスクリーンショットに示されているソーシャルプラグインのインターフェイスを収容できる十分な広さである必要があります。後述の displayAfterVideo プロパティを使用すると、動画の終了時に自動的にインターフェイスを表示することもできます。

このプラグインを使用してソーシャルメディアのメタタグを含めたウェブページの動作するサンプルについては、こちらをクリックしてください。

概要

このドキュメントでは、Brightcove Player を含む既存の HTML ページでソーシャルメディアの共有を有効にする手順について説明します。これは、適切な設定情報で Brightcove Player を作成し、その Player を HTML ページに追加していることを前提としています。

ソーシャルメディアプラグインを追加するには、次の手順に従います:

1. プレーヤーを設定します。これにより Brightcove Player がソーシャルメディアプラグインを使用するように更新されます。プレーヤーにソーシャル共有を含める方法は 3 つあります:

   • プレーヤーのプロパティを設定する
     Studio の Players モジュールでは、Social セクションでプロパティを設定できます。これは、さまざまなソーシャルメディアプラットフォームを選択するためのインターフェイスを提供しますが、それ以外の設定オプションは提供しません。

   • オプションを使用してプレーヤーを設定する
     Studio の Players モジュールの Plugins セクションを使用して、設定オプションを提供するためのインターフェイスがあります。

   • 共有 URL のカスタマイズ
     この実装では、コードを使用してソーシャルプラグインを追加します。

2. プレーヤーの HTML ページにソーシャルのメタタグを追加します。
3. HTML ページのメタタグを Facebook および X 用にバリデーションします。

ブラウザで Brightcove Player を含む HTML ページを開き、プレーヤー内のソーシャル共有アイコンを使用して動画を共有します。

ソーシャルメディアプラグインをページコード内に実装することもできますが、これはより高度な手法です。カスタム共有 URL を含めるためにこのアプローチを使用したい場合があります。詳細については、共有 URL のカスタマイズセクションを参照してください。

プレーヤーの設定

ソーシャル共有プラグインを追加するには、次の手順に従います:

1. PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したいプレーヤーを見つけます。
2. そのプレーヤーへのリンクを選択して、プレーヤーのプロパティを開きます。
3. Overview タブの Social セクションを展開します。
4. 次に、Enable Sharing のチェックボックスを選択します。
5. 動画を共有したいソーシャルメディアプラットフォームを選択します。
6. プレーヤーを公開するには、Publish Changes を選択します。
7. 開いているダイアログを閉じるには、Close を選択します。

JSON Editor を使用した実装

プレーヤー 7.21.0 以降では、JSON Editor を使用して次の手順でプラグインを追加することもできます:

Players モジュールで、設定したいプレーヤーに移動します。Overview タブの JSON Editor セクションを展開します。 "plugins" 配列を変更して、Social Sharing プラグインを追加します。

  
    "plugins": [
    {
      "name": "social",
      "is_packaged": true,
      "options": {
        ...
      }
    }
  ]

オプションを使用したプレーヤーの設定

より高度な設定を行うには、オプションを使用してプラグインを設定できます。手順は次のとおりです:

1. PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したいプレーヤーを見つけます。
2. JSON Editor または Players モジュールの Social セクションのいずれかを使用して、プレーヤーにプラグインを追加します。
3. JSON Editor に移動し、social プラグインの "options" オブジェクトを変更して、必要なオプションを追加します。この例では、オプションは次のことを行います:
   • 2-3 行目: 動画の名前と説明を設定します。
   • 4 行目: 動画プレーヤーとソーシャル共有メタタグを含むカスタムウェブページの URL を定義します。
   • 5-6 行目: X の場合、ユーザーが 5 秒のオフセット後に動画の視聴を開始できるようにします。

   • 7-13 行目: Facebook、X、Tumblr、Pinterest、LinkedIn のソーシャル共有を有効にします。

   {
     "title": "Tiger",
     "description": "Video of two tigers",
     "url": "https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media.html",
     "deeplinking": true,
     "offset": "00:00:05",
     "services": {
       "facebook": true,
       "x": true,
       "tumblr": true,
       "pinterest": true,
       "linkedin": true
     }
   }

4. Add をクリックします。
5. プレーヤーを公開するには、Publish Changes をクリックします。
6. 開いているダイアログを閉じるには、Close をクリックします。

オプション

プラグイン全般において、options オブジェクトはプラグインに初期化用のデータを渡してカスタマイズするために使用されます。渡されたオプションはデフォルト値とマージされて設定オブジェクトを生成し、player.socialSettings で利用できるようになります。

options.title

動画の共有タイトルです。ほとんどのソーシャルサービスで使用され、オーバーレイに表示されます。

• 型: String
• デフォルト: ''

options.description

共有投稿用のカスタム説明です。一部のソーシャルサービスでサポートされ、オーバーレイに表示されます。

• 型: String
• デフォルト: ''

options.url

動画のカスタム共有 URL です。この URL は、共有用の動画とメタタグを含むウェブページを指します。プレーヤーページにソーシャルメディアのメタデータを追加する方法の詳細については、メタタグセクションを参照してください。

• 型: String
• デフォルト: ''（オンデマンドで決定されます）

options.embedCode

動画を共有するためのカスタム埋め込みコード（Brightcove Player の iframe 埋め込みコード）です。このオプションを使用すると、共有ダイアログにある Embed Code フィールドの内容を完全に上書きできます。

このプロパティの値は、getEmbedCode() メソッドを使用して取得できます。

• 型: String
• デフォルト: ''（オンデマンドで生成されます）

options.embedDimensions

埋め込みコード内の寸法を有効化または無効化します。これは embedCode がプラグインによって生成される場合にのみ使用できます。

• 型: Boolean
• デフォルト: false

options.deeplinking

これは、共有された動画のディープリンクを有効化／無効化します。この機能を使用すると、ユーザーは特定のオフセットから動画の視聴を開始できます。詳細については、Deep Linking ドキュメントを参照してください。

• 型: Boolean
• デフォルト: false

options.offset

動画の再生を開始するカスタムオフセット（hh:mm:ss）です。これは deeplinking オプションと併用され、動画の再生を開始するタイミングを定義します。1 分 5 秒のオフセットを設定するには、00:01:05 と記述します。

• 型: String
• デフォルト: '00:00:00'

options.displayAfterVideo

動画の終了後（ended イベントをリッスン）にオーバーレイが表示されるようにするか、または表示されないようにするかを切り替えます。

videojs-endscreen プラグインが必要です。

• 型: Boolean
• デフォルト: false

options.buttonParent

共有アイコンがプレーヤー内のどこに表示されるかを定義します。これは、プレーヤーの子コンポーネントの名前を表す文字列、またはコンポーネントインスタンスにすることができます。

shelf に設定すると、共有アイコンはドックに表示されます。値が controlBar に設定されている場合、共有アイコンはコントロールバーに表示されます。

• 型: String|Component
• デフォルト: controlBar

options.removeEmbed

true に設定すると、iframe の埋め込みコードがオフ（非表示）になります。

• 型: Boolean
• デフォルト: false

options.services

どのサービスを許可するかを示すオブジェクトです。サービスのサポートを有効化または無効化するには、削除するのではなく、プロパティ値を true または false に設定します。

• 型: Object

options.services.facebook

Facebook 共有リンクを有効化します。

• 型: Boolean
• デフォルト: true

options.services.x

X 共有リンクを有効化します。

• 型: Boolean
• デフォルト: true

options.services.tumblr

Tumblr 共有リンクを有効化します。

• 型: Boolean
• デフォルト: true

options.services.facebook

Facebook 共有リンクを有効化します。

• 型: Boolean
• デフォルト: true

options.services.pinterest

Pinterest 共有リンクを有効化します。

• 型: Boolean
• デフォルト: true

options.services.linkedin

LinkedIn 共有リンクを有効化します。

• 型: Boolean
• デフォルト: true

オプションの例:

{
  "title": "Tiger",
  "description": "Video of two tigers",
  "url": "https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media.html",
  "deeplinking": true,
  "offset": "00:00:05",
  "buttonParent": "controlBar",
  "services": {
    "linkedin": true,
    "pinterest": true,
    "tumblr": true,
    "x": true,
    "facebook": true
  }
}

ゲッターおよびセッターの設定メソッド

設定オプションの設定および取得の両方に利用できるメソッドが多数あります。すべてのメソッドは、videojs.ModalDialog クラスを拡張する SocialOverlay コンポーネントに関連付けられています。（このクラスに関する情報は、Implementing the ModalDialog ドキュメントに記載されています。）

ソーシャルプラグインが初期化されると、SocialOverlay コンポーネントのインスタンスが player.socialOverlay で利用できるようになります。ゲッターおよびセッターメソッドを使用する一般的な書式は次のとおりです:

player.socialOverlay.methodName()

setDirectLink(string)

• 使用法: player.socialOverlay.setDirectLink(string)
• 目的: ソーシャルオーバーレイで使用する URL を更新します。値を空文字列（''）に設定すると、URL はオンデマンドで決定されるようになります。

getDirectLink()

• 使用法: player.socialOverlay.getDirectLink()
• 目的: ソーシャルオーバーレイで使用される URL を返します。

setEmbedCode(string)

• 使用法: player.socialOverlay.setEmbedCode(string)
• 目的: ソーシャルオーバーレイで使用する埋め込みコードを更新します。

getEmbedCode()

• 使用法: player.socialOverlay.getEmbedCode()
• 目的: ソーシャルオーバーレイで使用される埋め込みコードを取得します。

SocialButton

ソーシャルプラグインが初期化されると、SocialButton コンポーネントのインスタンスが player.socialButton で利用できるようになります。このコンポーネントは videojs.Button クラスを拡張します。

メタタグの生成

前のセクションで Brightcove Player をソーシャル共有プラグインを使用するように更新したら、HTML ページにソーシャルメタタグを追加する準備が整っています。

これらのメタタグを使用すると、ソーシャル共有サイトが投稿に動画プレーヤーおよびサムネイルを埋め込めるようになります。下記のフォームは、入力した情報で CMS API を呼び出し、動画データを取得します。次に、その特定のデータを使用してソーシャルメタタグを生成します。

Brightcove Player を含む HTML ページにソーシャルメディアのメタタグを追加するには、次の手順に従います:

1. 下のフォームにアカウント、プレーヤー、動画の情報を入力し、Generate Social Tags ボタンを選択します。

データ入力

1. Select the code ボタンを押します。次に、選択したコードをコピーして、HTML プレーヤーページの <head> セクションに貼り付けます。

生成されたソーシャル共有メタタグ

1. 変更を保存します。これでプレーヤーでソーシャルメディア共有のインターフェイスを使用する準備が整いました。

Facebook での共有

現時点では、Facebook ウォール内で動画を再生できるのは Facebook のネイティブプレーヤーのみです。動画を共有して Facebook ウォール内で再生したい場合は、Brightcove Social を使用できます。詳細については、Getting Started with Brightcove Social ドキュメントを参照してください。

Brightcove Player は、新しいブラウザのタブまたはウィンドウで動画とプレーヤーを開くリンクをウォールに作成します。多くの方には、この動作で問題ない場合もあります。これを実現するために、Facebook はページの HTML 内に Open Graph（og）メタタグを使用して動画を定義することを許可しています。Facebook 用の og タグの使用方法の詳細については、Sharing Best Practices ドキュメントを参照してください。

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Social Media Plugin</title>
    <!-- Open Graph Sharing Metadata -->
    <meta property="og:site_name" content="Brightcove"/>
    <meta property="og:title" content="Social Media Plugin"/>
    <meta property="og:type" content="video"/>
    <meta property="og:url" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media.html"/>
    <meta property="og:image" content="https://solutions.brightcove.com/bcls/assets/images/Tiger_poster.png" />
    <meta property="og:description" content="Tiger"/>
    <meta property="og:video:width" content="640"/>
    <meta property="og:video:height" content="360"/>
    <!-- X: card/meta-tags -->
    <meta name="x:card" content="player"/>
    <meta name="x:site" content="@username" />
    <meta name="x:title" content="Tiger"/>
    <meta name="x:description" content="Tiger video"/>
    <meta name="x:image" content="https://solutions.brightcove.com/bcls/assets/images/Tiger_poster.png"/>
    <meta name="x:player" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media.html"/>
    <meta name="x:player:width" content="640"/>
    <meta name="x:player:height" content="360"/>
    <meta name="x:stream" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-x.html"/>
    <meta name="x:player:stream:content_type" content="video/mp4" />
    <style>
      /* player dimensions */
      iframe {
        width: 640px;
        height: 360px;
      }
    </style>
  </head>
  <body>
    <iframe src='https://players.brightcove.net/1752604059001/oVYJtofHRF_default/index.html?videoId=4172255216001' allowfullscreen allow='encrypted-media'></iframe>
  </body>

  <!DOCTYPE html>
    <head>
      <meta charset="utf-8">
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <title>Social Media Plugin - Share Smart Player</title>
      <!-- Open Graph Sharing Metadata -->
      <meta property="og:site_name" content="Brightcove"/>
      <meta property="og:title" content="Social Media Plugin"/>
      <meta property="og:type" content="video"/>
      <meta property="og:url" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media.html"/>
      <meta property="og:image" content="https://solutions.brightcove.com/bcls/assets/images/Tiger_poster.png" />
      <meta property="og:description" content="Modus 550"/>
      <meta property="og:video:width" content="640"/>
      <meta property="og:video:height" content="360"/>
      <!-- X: card/meta-tags -->
      <meta name="x:card" content="player"/>
      <meta name="x:site" content="@username" />
      <meta name="x:title" content="Tiger"/>
      <meta name="x:description" content="Tiger video"/>
      <meta name="x:image" content="https://solutions.brightcove.com/bcls/assets/images/Tiger_poster.png"/>
      <meta name="x:player" content="https://players.brightcove.net/3676484087001/f28fbfc5-9153-4c51-ac67-ec6bcad8a28e_default/index.html"/>
      <meta name="x:player:width" content="640"/>
      <meta name="x:player:height" content="360"/>
      <meta name="x:stream" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-custom.html"/>
      <meta name="x:player:stream:content_type" content="video/mp4" />
    </head>
    <body>
      <iframe style='width: 640px;height: 360px;' src='https://players.brightcove.net/3676484087001/oVYJtofHRF_default/index.html' allowfullscreen allow='encrypted-media'></iframe>
    </body>
  </html>
  
  

1. バリデーションセクションで説明されているように、有効なメタタグになっていることを確認することを忘れないでください。

Facebook への共有に関する詳細については、以下を参照してください:

• Configuring the Social Properties for a Player

X での共有

X で動画を共有したい場合は、X のメタタグを含める必要があります。

現在、ディープリンクを使用して指定した時点から動画を開始できるソーシャルサイトは X だけです。この機能を使用したくない場合は、下の例にあるプレーヤー URL から time パラメーターを単純に外してください。

ディープリンク機能を使用するには、Deep Linking ドキュメントで定義されているように、クエリ文字列に time パラメーターを追加する必要があります。

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Social Media Plugin - Deep Linking with X</title>
    <!-- Open Graph Sharing Metadata -->
    <meta property="og:site_name" content="Brightcove"/>
    <meta property="og:title" content="Social Media Plugin"/>
    <meta property="og:description" content="Great Blue Heron"/>
    <meta property="og:url" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-twitter.html"/>
    <meta property="og:image" content="https://solutions.brightcove.com/bcls/assets/images/Great-Blue-Heron.png"/>
    <meta property="og:type" content="video"/>
    <meta property="og:video:width" content="640"/>
    <meta property="og:video:height" content="360"/>
    <!-- X: card/meta-tags -->
    <meta name="x:card" content="player"/>
    <meta name="x:site" content="@username" />
    <meta name="x:title" content="Social Media Plugin"/>
    <meta name="x:description" content="Great Blue Heron"/>
    <meta name="x:image" content="https://solutions.brightcove.com/bcls/assets/images/Great-Blue-Heron.png"/>
    <meta name="x:player" content="https://players.brightcove.net/1752604059001/2c7eac7c-181c-41d1-aae8-4a5107c05ee2_default/index.html?videoId=4172255216001#t=00h00m15s&autoplay=true"/>
    <meta name="x:player:width" content="640"/>
    <meta name="x:player:height" content="360"/>
    <meta name="x:stream" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-twitter.html"/>
    <meta name="x:player:stream:content_type" content="video/mp4" />
  </head>
  <body>
    <iframe style='width: 640px;height: 360px;' src='https://players.brightcove.net/1752604059001/oVYJtofHRF_default/index.html?videoId=4172255216001' allowfullscreen allow='encrypted-media'></iframe>
  </body>

  <!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Social Media Plugin - Deep Linking with X</title>
    <!-- Open Graph Sharing Metadata -->
    <meta property="og:site_name" content="Brightcove"/>
    <meta property="og:title" content="Social Media Plugin"/>
    <meta property="og:description" content="Tiger video"/>
    <meta property="og:url" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-perform.html"/>
    <meta property="og:image" content="https://solutions.brightcove.com/bcls/assets/images/Tiger.jpg"/>
    <meta property="og:type" content="video"/>
    <meta property="og:video:width" content="640"/>
    <meta property="og:video:height" content="360"/>
    <!-- X: card/meta-tags -->
    <meta name="x:card" content="player"/>
    <meta name="x:site" content="@username" />
    <meta name="x:title" content="Social Media Plugin"/>
    <meta name="x:description" content="Tiger video"/>
    <meta name="x:image" content="https://solutions.brightcove.com/bcls/assets/images/Tiger.jpg"/>
    <meta name="x:player" content="https://players.brightcove.net/3676484087001/f28fbfc5-9153-4c51-ac67-ec6bcad8a28e_default/index.html?t=00h00m15s&autoplay=true"/>
    <meta name="x:player:width" content="640"/>
    <meta name="x:player:height" content="360"/>
    <meta name="x:stream" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-perform.html"/>
    <meta name="x:player:stream:content_type" content="video/mp4" />
  </head>
  <body>
    <iframe style='width: 640px;height: 360px;' src='https://players.brightcove.net/3676484087001/oVYJtofHRF_default/index.html' allowfullscreen allow='encrypted-media'></iframe>
  </body>
  </html>

1. バリデーションセクションで説明されているように、有効なメタタグになっていることを確認することを忘れないでください。

X のメタタグの設定に関する詳細については、以下を参照してください:

• Sharing Videos to X Player Cards
• X Developer Documentation
• GitHub 上の X カードのサンプル

バリデーション

ページにメタタグを含める手順を実施したら、Facebook と X の両方についてページをバリデーションできます。いずれかのバリデーションプロセスでエラーが発生した場合は、必要に応じてプレーヤー設定を更新します。

Facebook

Facebook の場合は、Facebook Debugger にアクセスし、メタタグを含むページの URL を貼り付けて、Debug をクリックしてバリデーションします。

X

X の場合は、Card Validator にアクセスし、メタタグを含むページの URL を貼り付けて、Preview card をクリックしてバリデーションします。バリデーションの追加のメリットとして、X はその後ウェブサイトの確認を要求し、X カードの承認待ちリストに掲載されることになります。

共有 URL のカスタマイズ

ソーシャルメディアプラグインのより高度な実装は、Players モジュールから In-Page Embed Code を使用することです。これにより、ページコード内から設定オプションを渡すことができます。これを行う 1 つの理由は、ページ上のプレーヤーとは別のプレーヤーを共有するために、カスタムの embedCode 値を提供することです。

カスタムコードを使用してプラグインを実装するには、次の手順に従います:

1. PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したいプレーヤーを見つけます。
2. そのプレーヤーへのリンクを選択して、プレーヤーのプロパティを開きます。
3. Overview タブの Social セクションを展開し、チェックボックスがオンになっていないことを確認します。
4. Overview タブの Plugins セクションを展開します。
5. Stylesheets を選択し、Add Stylesheet ボタンを選択します。

   

6. CSS URL に次を入力します:

   https://players.brightcove.net/videojs-social/3/videojs-social.css

7. Scripts を選択し、Add Script ボタンを選択します。
8. JavaScript URL に次を入力します:

   https://players.brightcove.net/videojs-social/3/videojs-social.min.js

9. Add を選択します。
10. プレーヤーへの変更を公開します。

プレーヤーにはソーシャルメディア共有機能のすべてのコードが含まれていますが、プラグインは自動的に初期化されず、共有ボタンも作成されません。

1. 使用するプレーヤーを関連付け、HTML ページに JavaScript コードをコピーします。ブラウザでページを実行すると、共有ボタンがプレーヤーに表示されないことがわかります。ソーシャルプラグインが初期化されると表示されます。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Social Media Plugin</title>
</head>

<body>
<div style="max-width: 960px;">
  <video-js
    id="myPlayerID"
    data-account="1752604059001"
    data-player="vQgKqFD0n"
    data-embed="default"
    controls=""
    data-application-id=""
    class="vjs-fluid"
    style="padding-top: 56.25%;">
  </video-js>
</div>
<script
  src="//players.brightcove.net/1752604059001/vQgKqFD0n_default/index.min.js">
</script>
  <script type="text/javascript">
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this,
        options = {
          "title": "Tiger",
          "description": "Video of two tigers",
          "url": "https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media.html",
          "embedCode": "<iframe src='http://bcove.me/niqx01er'>",
          "deeplinking": true,
          "offset": "00:00:05",
          "services": {
            "facebook": true,
            "x": true,
            "tumblr": true,
            "pinterest": true,
            "linkedin": true
          }
        };
        myPlayer.social(options);
      });
    </script>

</body>
</html>

  <!DOCTYPE html>
  <head>
      <meta charset="utf-8">
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <title>Social Media Plugin</title>
  </head>

  <div style="max-width: 640px;">
    <video-js
      data-account="1752604059001"
      data-player="rklk1S3Zdz"
      data-embed="default"
      controls=""
      data-video-id="3851380732001"
      data-playlist-id=""
      data-application-id=""
      class="vjs-fluid">
    </video-js>
  </div>
  <script src="https://players.brightcove.net/1752604059001/rklk1S3Zdz_default/index.min.js"></script>
    <script type="text/javascript">
        videojs.getPlayer('myPlayerID').ready(function() {
          var myPlayer = this,
          options = {
            "title": "Tiger",
            "description": "Video of two tigers",
            "url": "https://player.support.brightcove.com/plugins/samples/social-media.html",
            "embedCode": "<iframe src='http://bcove.me/niqx01er'>",
            "deeplinking": true,
            "offset": "00:00:05",
            "services": {
              "facebook": true,
              "x": true,
              "tumblr": true,
              "pinterest": true,
              "linkedin": true
            }
          };
          myPlayer.social(options);
        });
      </script>

  </body>
  </html>

1. プレーヤーにソーシャル共有ボタンが表示されるはずです。コントロールバーで共有アイコンを探してください。

   

2. これで、プレーヤーページにソーシャルメタタグを追加する準備が整いました。これらのタグを生成するには、メタタグセクションを参照してください。

カスタムサービス

このプラグインは、6 つの主要なソーシャルメディアプラットフォームへの組み込みサポートを提供しますが、カスタムサービスを使用して他のプラットフォームを追加することもできます。これを行うには、options.customServices オブジェクトを設定します。このオブジェクトはカスタムサービスオブジェクトの配列です。短い設定例を示し、続いてその例の詳細について説明します。

次の例では 3 つのボタンが追加されます。1 つ目と 2 つ目のボタンは Xing と WhatsApp 用です。WhatsApp のボタンはモバイルでのみ表示されます。これら 2 つの例ではアイコンに Font Awesome を使用しています。プレーヤーが既にそのフォントを使用しているページにインページ埋め込みされている場合に便利ですが、他のスタイリングも使用できます。3 つ目は、Facebook の feed API を使用した Facebook 共有ボタンで、帰属表示用に Facebook アプリ ID を含めることができます。これを使用する場合は、通常の Facebook ボタンを無効化することをお勧めします。

[{
  className: 'fa fa-xing',
  title: 'Xing',
  hrefTemplate: 'https://www.xing.com/spi/shares/new?url={{url}}',
  bgColor: '#026466'
},
{
  className: 'fa fa-whatsapp',
  title: 'WhatsApp',
  hrefTemplate: 'https://api.whatsapp.com/send?phone=&text=title%20{{url}}',
  bgColor: '#25d366',
  mobileOnly: true
},
{
  classSuffix: 'facebook',
  title: 'Facebook',
  hrefTemplate: 'https://www.facebook.com/dialog/feed?app_id=123456789&caption={{title}}&display=page&link={{url}}'
}]

カスタムサービスオブジェクトのプロパティを以下に示します:

customService.title

• 型: string
• 共有先のタイトル。

customService.className

• 型: string
• ボタンに追加するクラス、またはスペース区切りのクラスのリスト。

customService.classSuffix

• 型: string
• このサフィックスは vjs-icon- に追加されてボタンのクラスを生成します。className が指定されていない場合にのみ使用されます。Video.js のフォントには追加のソーシャル共有先アイコンが含まれていないため、標準の共有先のいずれかを置き換える場合にのみ有用です。

customService.hrefTemplate

• 型: string
• 共有 URL を生成する文字列テンプレート。マクロ {% raw %}{{{url}}{% endraw %}、{% raw %}{{poster}}{% endraw %}、{% raw %}{{title}}{% endraw %}、{% raw %}{{description}}{% endraw %} を含めることができます。関数を指定できない場合（例: Player Management API に JSON 文字列でオプションを提供する場合）には、customService.href の代わりに使用できます。

customService.href

• 型: string
• 共有 URL を生成する関数。オブジェクトを受け取って文字列を返す必要があります。指定されていない場合、これは hrefTemplate から生成されます。

customService.bgColor

• 型: string
• 背景色の要素スタイルとして適用されるオプションの CSS カラー値。ボタンが CSS でスタイル設定されている場合は不要ですが、特にアイコンが既存のスタイルシートでスタイル設定される場合の利便性のために提供されています。

customService.mobileOnly

• 型: boolean
• デフォルト: false
• true の場合、このボタンは Android および iOS でのみ表示されます。

既知の問題

エンドスクリーンに短い説明がない

動画の短い説明は、動画の再生中に共有ボタンをクリックすると表示されます。共有情報を含むエンドスクリーンには、短い説明は表示されません。これは設計上の仕様です。

ボタンのキーボードナビゲーション - Firefox for OS X

Firefox for OSX のデフォルトのタブ操作はテキストボックスとリスト要素のみを移動します。ソーシャルプラグインのボタンはリンク要素であるため、システム環境設定 > キーボード > ショートカットで すべてのコントロール のチェックボックスをオンにしない限り、キーボードでのナビゲーションはできません。

変更履歴

v5.0.2 までの過去のリリースノートおよび変更履歴については、Social Sharing Plugin Releases を参照してください。

v5.0.2 以降に行われた重要な変更は、Brightcove Player リリースノートに記載されます。