例
たとえば、Brightcove Playerのウェブページがあるとします。今、ユーザーはソーシャルメディアプラットフォーム間でビデオを共有できるようにしたいと考えています。ソーシャルメディアプラグインを使用すると、タイトルと説明のドックにソーシャル共有アイコンが表示されます。
このアイコンをクリックすると、次に示すようなソーシャル共有画面が表示されます。
次の2つの理由から、プレーヤーの幅と高さを設定する必要があります。
- 幅や高さが設定されていない場合、Twitterに渡す値がないため、Twitterカードは検証されません。
- 上のスクリーンショットに示すように、幅は、ソーシャルプラグインのインターフェイスを収容するのに十分な幅にする必要があります。インターフェースを使用して、ビデオ側にインターフェースを自動的に表示することもできます。
displayAfterVideo
プロパティ、以下に記載されています。
クリックここにプラグインを使用し、ソーシャルメディアのメタタグを含むWebページの実用的なサンプル。
概要
このドキュメントでは、既存の HTML ページの Brightcove Player とのソーシャルメディア共有を有効にする手順について説明します。ここでは、適切な設定情報を使用して Brightcove Player を作成し、そのプレーヤーを HTML ページに追加していることを前提としています。
ソーシャルメディアプラグインを追加するには、次の手順に従います。
-
プレーヤーを設定します。これにより、Brightcove Player がソーシャルメディアプラグインを使用するように更新されます。プレーヤーとのソーシャル共有を含めるには、次の3つの方法があります。
-
プレーヤーのプロパティを構成する
スタジオでプレイヤーモジュール、あなたはすることができますでプロパティを構成しますソーシャルセクション。これは、さまざまなソーシャルメディアプラットフォームを選択するためのインターフェイスを提供しますが、他の構成オプションは提供しません。 -
オプションを使用してプレーヤーを構成する
スタジオでプレイヤーを使用するモジュールプラグインセクションには、構成オプションを提供するためのインターフェースがあります。 -
共有 URL のカスタマイズ
この実装は、コードを使用してソーシャルプラグインを追加します。
-
- ソーシャルを追加メタタグプレーヤーのHTMLページに移動します。
- FacebookとTwitterのHTMLページ上のメタタグを検証します。
ブラウザで Brightcove Player で HTML ページを開き、プレーヤーのソーシャル共有アイコンを使用して動画を共有します。
ページコード内にソーシャルメディアプラグインを実装することもできますが、これはより高度なソリューションです。このアプローチを使用して、カスタム共有 URL を含めることもできます。詳細については、共有URLのカスタマイズセクション。
プレーヤーを構成する
ソーシャル共有プラグインを追加するには、次の手順に従います。
- を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
- プレーヤーのリンクを選択して、プレイヤーのプロパティを開きます。
- 選択するソーシャル左側のナビゲーションメニューにあります。
- 次に、[ 共有を有効にする] のチェックボックスをオンにします。
- 動画を共有するソーシャルメディアプラットフォームを選択します。
- プレーヤーを公開するには、[ 公開と埋め込み] > [変更を公開] を選択します。
- 開くダイアログを閉じるには、[ 閉じる] を選択します。
オプションでプレーヤーを構成する
より高度な設定のために、プラグインを構成するためのオプションとしてプロパティを使用することができます。これを行うには、次の手順を実行します。
- を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
- プレーヤーのリンクを選択して、プレイヤーのプロパティを開きます。
- 左側のナビゲーションメニューで [ Social ] を選択し、チェックボックスがオフになっていることを確認します。
- 左側のナビゲーションメニューで [ プラグイン ] を選択します。
- からプラグインを追加するドロップダウンメニューで、カスタムプラグイン。
- [ プラグイン名 ] に、と入力します
social
。 - JavaScript の URL には、次のように入力します。
https://players.brightcove.net/videojs-social/3/videojs-social.min.js
- CSS の URL には、次のように入力します。
https://players.brightcove.net/videojs-social/3/videojs-social.css
- [ オプション (JSON)] テキストボックスに構成オプションを入力します。この例では、オプションは次のことを行います。
- 2-3行目の:動画の名前と説明を設定します。
- 4行目:動画プレーヤーとソーシャル共有メタタグを使用して、カスタム Web ページの URL を定義します。
- 5-6行目:Twitter の場合、ユーザーは 5 秒オフセット後にビデオの視聴を開始できます。
-
7~13行目:Facebook、Twitter、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, "twitter": true, "tumblr": true, "pinterest": true, "linkedin": true } }
- [ 保存] をクリックします。
- プレーヤーを公開するには、[ パブリッシュと埋め込み] > [変更の公開] の順にクリックします。
- 開くダイアログを閉じるには、[ 閉じる] をクリックします。
[プロパティ]
一般に、プラグインの場合、options
オブジェクトは初期化をカスタマイズするためにデータをプラグインに渡すために使用されます。この場合、このオブジェクトで次のプロパティを使用できます。
タイトル
- タイプ:文字列
- これは、動画を共有したときに表示されるカスタムタイトルです。
説明
- 型:文字列
- これは、それをサポートするソーシャルサービスによって使用されるカスタム説明です。
URL
- 型:文字列
- これは、あなたのビデオと共有するためのメタタグを持つカスタムWebページを指し示すURLです。ソーシャルメディアメタデータをプレーヤーページに追加する方法については、メタタグのセクションを参照してください。
埋め込みコード
- 型:文字列
- これは、動画を共有するためのBrightcove Playerの iframe 埋め込みコードです。これにより、の内容を完全に上書きできます埋め込みコード共有ダイアログにあるフィールド。
- このプロパティの値は、 getEmbedCode()方法。
RemoveEmbed
- タイプ:ブール
- デフォルト:
false
- に設定した場合
true
、iframe 埋め込みコードをオフ (非表示) します
ディスプレイアフタービデオ
- 型:ブール値
- デフォルト:
false
ended
イベントでソーシャル画面を自動的に表示します。
ディープリンク
- 型:ブール値
- デフォルト:
false
-
共有動画のディープリンクを有効または無効にします。この機能を使用すると、ユーザーは特定のオフセットからビデオを見始めることができます。詳細については、ディープリンク資料。
offset
- 型:文字列
- フォーマット:
00h00m00s
- これは、
deeplinking
プロパティと共に使用され、ビデオの再生を開始するタイミングを定義します。1分5秒をオフセットするには、次のように記述します。00h01m05s
サービス
このオブジェクトにすべてのサービスプロパティを含めます。サービスのサポートを有効または無効にするには、プロパティ値を削除するのではなく、true または false に設定します。
facebook
- 型:ブール値
- デフォルト:
true
- これにより、Facebook の共有アイコンが有効になります。
twitter
- 型:ブール値
- デフォルト:
true
- これにより、Twitterの共有アイコンが有効になります。
tumblr
- 型:ブール値
- デフォルト:
true
- これにより、Tumblr 共有アイコンが有効になります。
pinterest
- 型:ブール値
- デフォルト:
true
- これにより、Pinterest 共有アイコンが有効になります。
linkedin
- 型:ブール値
- デフォルト:
true
- これにより、LinkedIn 共有アイコンが有効になります。
buttonParent
- タイプ:テキスト
- デフォルト:
shelf
- 共有アイコンの配置場所を指定します。 shelf (デフォルト)に設定すると、共有アイコンがドックに表示されます。値が ControlBar に設定されている場合、共有アイコンがコントロールバーに表示されます。
例:
{
"services": {
"linkedin": true,
"pinterest": true,
"tumblr": true,
"twitter": true,
"facebook": true
},
"offset": "00:00:05",
"deeplinking": true,
"url": "https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media.html",
"description": "Video of two tigers",
"buttonParent": "controlBar",
"title": "Tiger"
}
ゲッターとセッターの構成方法
設定オプションの設定と取得の両方に使用できるメソッドは多数あります。すべてのメソッドはに関連付けられていますSocialOverlayコンポーネントは、 videojs.ModalDialogクラス。(このクラスに関する情報は、 ModalDialogの実装ドキュメントを参照してください)。
ソーシャルプラグインが初期化されると、 SocialOverlay コンポーネントのインスタンスがで利用可能になりますplayer.socialOverlay
。ゲッターメソッドとセッターメソッドを使用するための一般的な形式は次のとおりです。
player.socialOverlay.methodName()
SetDirectLink (文字列)
- 使用法:
player.socialOverlay.setDirectLink(string)
- 目的:ソーシャルオーバーレイで使用される URL を更新します。値を空の文字列 (「) に設定すると、URL はオンデマンドで決定されます。
getDirectLink ()
- 使用法:
player.socialOverlay.getDirectLink()
- 用途:ソーシャルオーバーレイで使用される URL を返します。
SetembedCode (文字列)
- 使用法:
player.socialOverlay.setEmbedCode(string)
- 用途:ソーシャルオーバーレイで使用される埋め込みコードを更新します。
getembedCode ()
- 使用法:
player.socialOverlay.getEmbedCode()
- 用途:ソーシャルオーバーレイで使用される埋め込みコードを取得します。
SocialButton
ソーシャルプラグインが初期化されると、 SocialButton コンポーネントのインスタンスがで利用可能になりますplayer.socialButton
。このコンポーネントは、 VideoJS.Button クラスを拡張します。
メタタグの生成
前のセクションのソーシャル共有プラグインを使用するように Brightcove Player を更新したら、HTML ページにソーシャルメタタグを追加する準備が整いました。
これらのメタタグを使用すると、ソーシャル共有サイトで動画プレーヤーとサムネイルを投稿に埋め込むことができます。以下のフォームは、 CMS APIあなたの情報であなたのビデオデータを取得します。次に、特定のデータを使用してソーシャルメタタグを生成します。
Brightcove Playerで HTML ページにソーシャルメディアのメタタグを追加するには、次の手順に従います。
- 以下のフォームにアカウント、プレーヤー、動画の情報を入力し、[ ソーシャルタグを生成] ボタンを選択します。
データ入力
- [ コードを選択] ボタンを押します。次に、選択したコードをコピーして HTML
<head>
プレーヤーページのセクションに貼り付けます。
生成されたソーシャル共有メタタグ
- 変更を保存します。これで、プレーヤーとソーシャルメディア共有インターフェースを使用する準備が整いました。
Facebookで共有する
現時点では、FacebookのネイティブプレーヤーだけがFacebookの壁でビデオを再生します。動画を共有して Facebook ウォールで再生したい場合は、ブライトコーブソーシャルを使用できます。詳細については、Brightcove Social の使用開始に関するドキュメントを参照してください。
Brightcove Player が壁にリンクを作成し、動画とプレーヤーを新しいブラウザタブまたはウィンドウで開きます。ほとんどの人にとって、この動作は問題ないかもしれません。これを行うには、Facebookでは、オープングラフを使用してビデオを定義することができます ( OG ) あなたのページのHTMLページ内のメタタグ.Facebook で OG タグを使用する方法の詳細については、共有のベストプラクティスのドキュメントを参照してください。
プレーヤーと動画へのリンクを共有するには、次の手順に従います。
- Players モジュールで、[ ソーシャル共有]セクションまでスクロールダウンし、[ はい ] を選択して共有を許可します。
- 変更を保存し、プレーヤーを公開します。
- プレーヤーとビデオで HTML ページを作成します。
- HTML ページのソーシャルメタタグを生成し、次のように更新します。
- 9〜11行目:あなたのサイト名、あなたのビデオのタイトル、ビデオとしてタイプを定義します。
- 12 行目では、Brightcove Player の動画の URL を指します。
-
13行目:動画のサムネイル画像を指しています。
- 14〜16行目:プレーヤーのサイズとともに、動画の説明を入力します。
<!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"/>
<!-- Twitter: card/meta-tags -->
<meta name="twitter:card" content="player"/>
<meta name="twitter:site" content="@username" />
<meta name="twitter:title" content="Tiger"/>
<meta name="twitter:description" content="Tiger video"/>
<meta name="twitter:image" content="https://solutions.brightcove.com/bcls/assets/images/Tiger_poster.png"/>
<meta name="twitter:player" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media.html"/>
<meta name="twitter:player:width" content="640"/>
<meta name="twitter:player:height" content="360"/>
<meta name="twitter:stream" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-twitter.html"/>
<meta name="twitter: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 webkitallowfullscreen mozallowfullscreen></iframe>
</body>
これを行うには、次の手順を実行します。
- Players モジュールで、[ ソーシャル共有] セクションまで下にスクロールし、[ はい ] を選択して [共有を許可] をクリックします。
- 変更を保存し、プレーヤーを公開します。
- プレーヤーとビデオで HTML ページを作成します。
- HTML ページのソーシャルメタタグを生成し、次のように更新します。
- 92-94行:あなたのサイト名、あなたのビデオのタイトル、およびビデオとしてタイプを定義します。
- 95行:動画の URL を指します。
-
96行目:動画のサムネイル画像を指しています。
- 97〜99行目:プレーヤーのサイズとともに、動画の説明を入力します。
<!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"/>
<!-- Twitter: card/meta-tags -->
<meta name="twitter:card" content="player"/>
<meta name="twitter:site" content="@username" />
<meta name="twitter:title" content="Tiger"/>
<meta name="twitter:description" content="Tiger video"/>
<meta name="twitter:image" content="https://solutions.brightcove.com/bcls/assets/images/Tiger_poster.png"/>
<meta name="twitter:player" content="https://players.brightcove.net/3676484087001/f28fbfc5-9153-4c51-ac67-ec6bcad8a28e_default/index.html"/>
<meta name="twitter:player:width" content="640"/>
<meta name="twitter:player:height" content="360"/>
<meta name="twitter:stream" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-custom.html"/>
<meta name="twitter: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 webkitallowfullscreen mozallowfullscreen></iframe>
</body>
</html>
Facebook への共有の詳細については、以下を参照してください。
ツイッターでシェアする
Twitterで動画を共有する場合は、Twitterメタタグを含める必要があります。
現在、Twitterはディープリンクを使用して特定の時点で動画を開始できる唯一のソーシャルサイトです。この機能を使いたくない場合は、以下の例では、プレーヤーの URL をオフにして time パラメーターのままにしてください。
ディープリンク機能を使用するには、ディープリンクドキュメントで定義されているように、クエリ文字列に時間パラメーターを追加する必要があります。
ここに例があります:
- Players モジュールで、[ ソーシャル共有] セクションまで下にスクロールし、[ はい ] を選択して [共有を許可] をクリックします。
- 変更を保存し、プレーヤーを公開します。
- ソーシャルメタタグを生成したら、次のように更新します。
- 64-67行:Twitterカードの種類を
player
、あなたのTwitterサイト、タイトルと説明として定義してください。 -
68行目:動画のサムネイル画像を指しています。
- 69行目:Brightcove PlayerURLを指しています。クエリパラメータがを定義し
videoId
、ビデオの 15 秒のポイントから自動的に再生を開始するようにプレーヤーに指示します。これは、Twitterで動画にディープリンクする方法です。 - 70から71行:プレーヤーの寸法を提供します.
- 72行目:BrightcovePlayerを使用したHTMLページのURLを指します。
- 64-67行:Twitterカードの種類を
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Social Media Plugin - Deep Linking with Twitter</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"/>
<!-- Twitter: card/meta-tags -->
<meta name="twitter:card" content="player"/>
<meta name="twitter:site" content="@username" />
<meta name="twitter:title" content="Social Media Plugin"/>
<meta name="twitter:description" content="Great Blue Heron"/>
<meta name="twitter:image" content="https://solutions.brightcove.com/bcls/assets/images/Great-Blue-Heron.png"/>
<meta name="twitter:player" content="https://players.brightcove.net/1752604059001/2c7eac7c-181c-41d1-aae8-4a5107c05ee2_default/index.html?videoId=4172255216001#t=00h00m15s&autoplay=true"/>
<meta name="twitter:player:width" content="640"/>
<meta name="twitter:player:height" content="360"/>
<meta name="twitter:stream" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-twitter.html"/>
<meta name="twitter: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 webkitallowfullscreen mozallowfullscreen></iframe>
</body>
例を挙げます。
- Players モジュールで、[ ソーシャル共有] セクションまで下にスクロールし、[ はい ] を選択して [共有を許可] をクリックします。
- 変更を保存し、プレーヤーを公開します。
- ソーシャルメタタグを生成したら、次のように更新します。
- 139~142 行目:Twitterカードの種類を
player
、Twitterサイト、タイトルと説明として定義しています。 -
143行目:動画のサムネイル画像を指しています。
- 144行目:Brightcove PlayerURLを指しています。クエリパラメータによってが定義され
videoId
、プレーヤーはビデオの 15 秒ポイントから自動的に再生を開始するように指示します。これは、Twitterで動画にディープリンクする方法です。 - 145-146: プレーヤーの寸法を提供します.
- 147 行目:Brightcove Playerの HTML ページの URL を指します。
- 139~142 行目:Twitterカードの種類を
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Social Media Plugin - Deep Linking with Twitter</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"/>
<!-- Twitter: card/meta-tags -->
<meta name="twitter:card" content="player"/>
<meta name="twitter:site" content="@username" />
<meta name="twitter:title" content="Social Media Plugin"/>
<meta name="twitter:description" content="Tiger video"/>
<meta name="twitter:image" content="https://solutions.brightcove.com/bcls/assets/images/Tiger.jpg"/>
<meta name="twitter:player" content="https://players.brightcove.net/3676484087001/f28fbfc5-9153-4c51-ac67-ec6bcad8a28e_default/index.html?t=00h00m15s&autoplay=true"/>
<meta name="twitter:player:width" content="640"/>
<meta name="twitter:player:height" content="360"/>
<meta name="twitter:stream" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-perform.html"/>
<meta name="twitter: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 webkitallowfullscreen mozallowfullscreen></iframe>
</body>
</html>
Twitterメタタグの構成の詳細については、以下を参照してください。
検証する
あなたのページにメタタグを含めるための手順に従えば、FacebookとTwitterの両方のページを検証することができます。いずれかの検証プロセスでエラーが発生した場合は、必要に応じてプレーヤーの設定を更新します。
Facebook の場合は、 Facebook デバッガーに移動し、メタタグを含むページに URL を貼り付け、[ デバッグ] をクリックして検証します。
Twitter の場合は、カード検証ツールに移動し、メタタグを含むページに URL を貼り付け、[ カードのプレビュー] をクリックして検証します。検証の追加の利点は、Twitterがあなたのウェブサイトを確認するように要求し、あなたはTwitterカードの承認を受けるために待機リストに行くことです。
共有 URL のカスタマイズ
ソーシャルメディアプラグインのより高度な実装は、 Playersモジュールからインページ埋め込みコードを使用することです。これにより、ページコード内から設定オプションを渡すことができます。これを行う理由の1つは、embedCode
ページ上のプレイヤーとは異なるプレーヤーを共有するためにカスタム値を提供することです。
カスタムコードを使用してプラグインを実装するには、次の手順を実行します。
- を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
- プレーヤーのリンクを選択して、プレイヤーのプロパティを開きます。
- 左側のナビゲーションメニューで [ Social ] を選択し、チェックボックスがオフになっていることを確認します。
- 左側のナビゲーションメニューで [ プラグイン ] を選択します。
- 選択するスタイルシートを選択しますスタイルシートを追加するボタン。
- CSS の URL には、次のように入力します。
https://players.brightcove.net/videojs-social/3/videojs-social.css
- [ スクリプト] を選択し、[ スクリプトの追加 ] ボタンを選択します。
- JavaScript の URL には、次のように入力します。
https://players.brightcove.net/videojs-social/3/videojs-social.min.js
- [ 保存] を選択します。
- 変更をプレーヤーに公開します。
これで、プレーヤーにソーシャルメディア共有機能のコードがすべて含まれていますが、プラグインが自動的に初期化され、共有ボタンが作成されることはありません。
-
作業しているプレーヤーを関連付けて、高度なコードを HTML ページにコピーします。ブラウザでページを実行する場合は、プレーヤーに共有ボタンが表示されないことに注意してください。ソーシャルプラグインが初期化されると、
- HTML ページコードに、次のようにして JavaScript コードを追加します。
- 23-24行線:プレーヤーへの参照を取得します。
- 25~40行目です:ソーシャル共有プラグインのオプションを設定します。詳細については、「プロパティ」セクションを参照してください。
- 28行目です:共有 URL を設定します。
-
41行目:特定のオプションでソーシャルプラグインを初期化します。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Social Media Plugin</title>
</head>
<body>
<video-js id="myPlayerID"
data-video-id="5977793284001"
data-account="1752604059001"
data-player="vQgKqFD0n"
data-embed="default"
data-application-id
class="video-js"
controls
width="720"
height="405"></video-js>
<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,
"twitter": true,
"tumblr": true,
"pinterest": true,
"linkedin": true
}
};
myPlayer.social(options);
});
</script>
</body>
</html>
- HTML ページコードに、次のようにして JavaScript コードを追加します。
- 147号線:プレーヤーへの参照を取得します。
- 149~164行目:ソーシャル共有プラグインのオプションを設定します。詳細については、「プロパティ」セクションを参照してください。
- 153号線:スマートプレーヤーを使用するように共有 URL を設定します。このプロパティを使用して、共有 URL を任意の Brightcove Player またはスマートプレーヤーに設定できます。
-
166号線:特定のオプションでソーシャルプラグインを初期化します。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Social Media Plugin</title>
</head>
<body>
<video-js id="myPlayerID"
data-account="1752604059001"
data-player="vQgKqFD0n"
data-embed="default"
data-application-id
class="video-js"
controls
width="720"
height="405"></video-js>
<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,
"twitter": true,
"tumblr": true,
"pinterest": true,
"linkedin": true
}
};
myPlayer.social(options);
});
</script>
</body>
</html>
-
プレーヤーに [ソーシャル共有] ボタンが表示されるはずです。コントロールバーで共有アイコンを探します。
- これで、ソーシャルメタタグをプレーヤーページに追加する準備が整いました。を参照してくださいメタタグこれらのタグを生成するセクション。
カスタムサービス
このプラグインは、6つの人気のあるソーシャルメディアプラットフォームのサポートを内蔵していますが、カスタムサービスを使用して他のプラットフォームを追加することもできます。これを行うには、options.customServices
オブジェクトを設定します。このオブジェクトは、カスタムサービスオブジェクトの配列です。短い設定例が示され、次に例の詳細が示されています。
次の例では、3 つのボタンを追加します。XingとWhatsAppの最初のボタンと2番目のボタン。WhatsApp ボタンは、モバイルでのみ表示されます。これら 2 つの例は、アイコンに Font Awesome を使用しています。これは、プレイヤーが既にフォントを使用しているページのインページ埋め込みで、他のスタイルが使用できる場合に便利です。3つ目は、FacebookのフィードAPIを使用するFacebookの共有ボタンで、FacebookアプリIDをアトリビューションに含めることができます。これを使用するときは、通常のFacebookボタンを無効にすることをお勧めします。
[{
className: 'fa fa-xing',
title: 'Xing',
hrefTemplate: 'https://www.xing.com/spi/shares/new?url=',
bgColor: '#026466'
},
{
className: 'fa fa-whatsapp',
title: 'WhatsApp',
hrefTemplate: 'https://api.whatsapp.com/send?phone=&text=title%20',
bgColor: '#25d366',
mobileOnly: true
},
{
classSuffix: 'facebook',
title: 'Facebook',
hrefTemplate: 'https://www.facebook.com/dialog/feed?app_id=123456789&caption=&display=page&link='
}]
以下は、カスタムサービスオブジェクトのプロパティを定義します。
CustomService.tit
- 型:文字列
- 共有先のタイトル。
CustomService.className
- 型:文字列
- ボタンに追加するクラスのクラスまたはスペース区切りのリスト。
CustomService.classSu
- 型:文字列
- サフィックスは、
vjs-icon-
ボタンのクラスを生成するために付加されます。className
が指定されていない場合にのみ使用されます。Video.js フォントには追加のソーシャル宛先アイコンが含まれていないため、標準の宛先の 1 つを置き換える場合にのみ便利です。
カスタムサービス.hrefTemplate
- 型:文字列
- 共有 URL を生成する sting テンプレート。これにはマクロ
customService.href
関数を指定できない場所 (JSON 文字列内のオプションを Player Management API に提供するなど) の代わりに使うことができます。
customservice.href
- 型:文字列
- 共有URLを生成する関数。オブジェクトを取り、文字列を返す必要があります。指定しない限り、これはから生成されます
hrefTemplate
。
CustomService.bgColor
- 型:文字列
- 背景色の要素スタイルとして適用されるオプションの CSS カラー値。ボタンが CSS によってスタイル設定されている場合は、必須ではありませんが、特に既存のスタイルシートによってアイコンがスタイルされる場合に便利です。
customservice.mobileOnly
- 型:ブール値
- デフォルト:false
- の場合
true
、ボタンはAndroidとiOSにのみ表示されます。
既知の問題
エンドスクリーンに短い説明はありません
ビデオの再生中に共有ボタンをクリックすると、ビデオの簡単な説明が表示されます。共有情報を含むエンド画面では、短い説明は表示されません。これは設計通りです。
ボタンのキーボードナビゲーション-OS X 版 Firefox
OSX 用 Firefox は、テキストボックスを介してタブ移動するためのデフォルトのタブ動作があり、要素のみをリストします。ソーシャルプラグインのボタンはリンク要素であるため、[ システム環境設定] > [キーボード] > [ショートカット] の下にある [ すべてのコントロール] チェックボックスをオンにしない限り、キーボードを使用して移動することはできません。
更新履歴
Social プラグインのリリースノートを参照してください。
過去のリリースノートについては、ここの changelog を参照してください。