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

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

    このトピックでは、ソーシャルメディアプラグインを使用して、Facebook、Google+、Twitter、Tumblr、Pinterest、およびLinkedInを通じてビデオを共有できるようにする方法を学びます。

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

    ソーシャルメディアのアイコン

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

    ソーシャルメディア共有インターフェイス

    の幅と高さを設定する必要があります player XNUMXつの理由から:

    1. 幅や高さが設定されていない場合は、Twitterに渡す値がなくなり、Twitterカードが検証されなくなります。
    2. 上記のスクリーンショットに示すように、幅はソーシャルプラグインのインターフェースに対応するのに十分な幅が必要です。 また、インターフェースを自動的に動画の最後に表示することもできます displayAfterVideo プロパティ、以下に記載されています。

    ナビゲーションヘッダーの ここ プラグインを使用し、ソーシャルメディアのメタタグを含むWebページの作業サンプル用です。

    概要

    このドキュメントでは、既存のHTMLページのソーシャルメディア共有を有効にする手順について説明します。 Brightcove Player その上に。 これは、 Brightcove Player 適切な構成情報を使用して、 player HTMLページに。

    ソーシャルメディアプラグインを追加するには、次の手順を実行します。

    1. 設定する player。 これはあなたを更新します Brightcove Player ソーシャルメディアプラグインを使用します。 とのソーシャル共有を含めるにはXNUMXつの方法があります。 player:

    2. ソーシャルを追加 METAタグ あなたへ playerのHTMLページ。
    3. 有効にする FaceBookとTwitterのHTMLページのメタタグ

    ブラウザで、HTMLページを開いて Brightcove Player でソーシャル共有アイコンを使用します player あなたのビデオを共有します。

    また、ページコード内にソーシャルメディアプラグインを実装することもできますが、これはより高度なソリューションです。 この方法を使用してカスタム共有URLを含めることができます。 詳細については、 共有URLのカスタマイズ の項目を検索します。

    設定する player

    ソーシャル共有プラグインを追加するには、次の手順を実行します。

    1. Video Cloud Studioで PLAYERS モジュールと新しいのいずれかを作成します player または見つけます player プラグインを追加する場所。
    2. のリンクを選択します player を開く playerのプロパティ。
    3. 次の項目を選択します: Social 左側のナビゲーションメニュー。
    4. 次に、のチェックボックスをオンにします。 共有を有効にする.
    5. 動画を共有するソーシャルメディアプラットフォームを選択してください。
    6. 公開するには player選択 公開と埋め込み>変更の公開.
    7. 開いているダイアログを閉じるには、を選択します。 閉じる.

    設定する player オプション付き

    より高度な設定には、 プロパティ プラグインを設定するためのオプションとして。 これを行うには、次の手順に従います。

    1. Video Cloud Studioで PLAYERS モジュールと新しいのいずれかを作成します player または見つけます player プラグインを追加する場所。
    2. のリンクを選択します player を開く playerのプロパティ。
    3. 次の項目を選択します: Social 左側のナビゲーションメニューでチェックボックスをオフにしてください。
    4. 次の項目を選択します: プラグイン 左側のナビゲーションメニュー。
    5. 次の選択 プラグイン XNUMXつのオプションから。
      プラグインを選択
    6. から プラグインを追加する ドロップダウンメニューから選択 カスタムプラグイン.
    7.   プラグイン名 入力します social.
    8.   JavaScriptを URL、入力:
      		https://players.brightcove.net/videojs-social/3/videojs-social.min.js
    9.   CSS URL、入力:
      		https://players.brightcove.net/videojs-social/3/videojs-social.css
    10. 構成オプションを オプション(JSON) テキストボックス。 この例では、オプションによって次のことが行われます。
      • 2-3:ビデオの名前と説明を設定します。
      • 4行目:ビデオを含むカスタムWebページのURLを定義します player ソーシャル共有メタタグ。
      • 5-6:Twitterの場合、5の2番目のオフセットの後で、ユーザーはビデオを見ることができます。
      • Lines 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
      		}
      	}
    11. ナビゲーションヘッダーの 保存.
    12. 公開するには player、クリック 公開と埋め込み>変更の公開.
    13. 開いているダイアログを閉じるには、 閉じる.

    プロパティ

    一般的なプラグインの場合、 options オブジェクトは初期化をカスタマイズするためにプラグインにデータを渡すために使用されます。 この場合、このオブジェクトで次のプロパティを使用できます。

    タイトル

    • タイプ:文字列
    • これは、あなたのビデオが共有されているときに表示されるカスタムタイトルです。

    説明

    • タイプ:文字列
    • これはそれをサポートする社会サービスによって使用されるカスタム説明です。

    URL

    • タイプ:文字列
    • これはあなたのビデオとメタタグを共有するカスタムWebページを指すURLです。 参照してください METAタグ にソーシャルメディアメタデータを追加する方法の詳細については、セクション player のページをご覧ください。

    埋め込みコード

    • タイプ:文字列
    • これは Brightcove Player ビデオを共有するためのiframe埋め込みコード。 これにより、コンテンツを完全に上書きできます。 埋め込みコード フィールドを共有ダイアログに配置します。
      ソーシャルメディアの埋め込みコード
    • このプロパティの値は、 getEmbedCode() 方法。

    removeEmbed

    • タイプ:ブール型
    • デフォルト: false
    • に設定した場合 trueiframe埋め込みコードを無効にします(隠す)

    displayAfterVideo

    • タイプ:ブール型
    • デフォルト: false
    • ソーシャルスクリーンが自動的に ended イベント

    逆リンク

    • タイプ:ブール型
    • デフォルト: false
    • 共有ビデオのディープリンクを有効/無効にします。 この機能により、ユーザーは特定のオフセットからビデオを見ることができます。 詳細については、 ディープリンク の資料をご参照ください。

    オフセット

    • タイプ:文字列
    • フォーマット: 00h00m00s
    • これは、 deeplinking ビデオの再生をいつ開始するかを定義します。 1分と5秒をオフセットするには、次のように書く: 00h01m05s

    サービス

    このオブジェクトにすべてのサービスプロパティを含めます。 サービスのサポートを有効または無効にするには、プロパティ値を削除するのではなく、trueまたはfalseに設定します。

    • facebook
      • タイプ:ブール型
      • デフォルト: true
      • これにより、Facebookの共有アイコンが有効になります。
    • twitter
      • タイプ:ブール型
      • デフォルト: true
      • これにより、Twitter共有アイコンが有効になります。
    • tumblr
      • タイプ:ブール型
      • デフォルト: true
      • これにより、Tumblrの共有アイコンが有効になります。
    • pinterest
      • タイプ:ブール型
      • デフォルト: true
      • これにより、Pinterest共有アイコンが有効になります。
    • linkedin
      • タイプ:ブール型
      • デフォルト: true
      • これにより、LinkedInの共有アイコンが有効になります。

    buttonParent

    • タイプ:テキスト
    • デフォルト: shelf
    • 共有アイコンをどこに配置するかを決定します。 に設定されている場合 、デフォルトでは、共有アイコンがドックに表示されます。 値がに設定されている場合 コントロールバー共有アイコンがコントロールバーに表示されます。

    例:

    	{
    		"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 。 getterメソッドとsetterメソッドを使用する一般的な形式は次のとおりです。

    	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ページに追加できます。

    これらのメタタグを使用すると、ソーシャル共有サイトで動画を埋め込むことができます playersと投稿のサムネイル。 以下のフォームは CMS API あなたの情報と一緒にあなたのビデオデータを取得します。 次に、特定のデータを含むソーシャルメタタグを生成します。

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

    1. アカウントを入力し、 player およびビデオ情報を下のフォームに入力し、 ソーシャルタグを生成 ボタン。

    データ入力

    口座情報
    サービスURL: https://edge.api.brightcove.com/playback/v1
    Video CloudBrightcove Player アカウント(サイト運営者ID):
    ポリシーキー:

    プレーヤー情報
    あなたのURL player ページ:
    Twitter @ウェブサイトのユーザー名:
    Player ID(から Playersモジュール):
    Player 幅:
    Player 身長:
    動画情報
    ビデオID(メディアモジュールから):

    ソーシャルタグを生成

    1. 押します: コードを選択 ボタン。 次に、選択したコードをコピーして <head> HTMLのセクション player のページをご覧ください。

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

    メタデータコード

    コードを選択 それをあなたのページにコピー&ペーストしてください。

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

    Facebookでの共有

    現時点では、Facebookのネイティブのみ player Facebookの壁で動画を再生します。 動画を共有してFacebookのウォールで再生したい場合は、 Brightcove Social。 詳細については、 Brightcove Social を使ってみよう の資料をご参照ください。

    Brightcove Player あなたのビデオを開く壁にリンクを作成し、 player 新しいブラウザタブまたはウィンドウ。 ほとんどの人にとって、この動作は問題ないかもしれません。 これを行うために、FacebookではOpen Graph(og)メタタグをHTMLページに挿入します。 使用方法の詳細については og Facebook用のタグは、 ベストプラクティスの共有 の資料をご参照ください。

    へのリンクを共有するには player およびビデオ、次の手順に従います。

    1. の中に Playersモジュール、下にスクロールして ソーシャル共有 セクションを選択し、 はい 共有を許可する。
    2. 変更を保存して公開します player.
    3. でHTMLページを作成します player とビデオ。
    4. あなたの ソーシャルメタタグ あなたのHTMLページのために、それらを次のように更新してください:
      • 9-11:サイト名、ビデオのタイトル、ビデオのタイプを定義します。
      • ライン12:あなたの動画のURLを指します。 Brightcove Player.
      • ライン13:ビデオのサムネイル画像を指します。

      • 14〜16行目:動画の説明と一緒に player 寸法
    	<!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>

    これを行うには、次の手順を実行します。

    1. の中に Playersモジュール、下にスクロールして ソーシャル共有 セクションを選択し、 はい 共有を許可する。
    2. 変更を保存して公開します player.
    3. でHTMLページを作成します player とビデオ。
    4. あなたの ソーシャルメタタグ あなたのHTMLページのために、それらを次のように更新してください:
      • 92-94:サイト名、ビデオのタイトル、ビデオのタイプを定義します。
      • Line 95:動画のURLを指します。
      • ライン96:ビデオのサムネイル画像を指します。

      • 97〜99行目:動画の説明と一緒に player 寸法
    	<!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>
    	
    	
    1. 有効なメタタグがあることを忘れないでください。 検証 の項目を検索します。

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

    Twitterで共有する

    Twitterであなたのビデオを共有したい場合は、Twitterのメタタグを含める必要があります。

    現在、Twitterは、ディープリンクを使用して特定の時点でビデオを開始できる唯一のソーシャルサイトです。 この機能を使用したくない場合は、時間パラメータをオフのままにしてください player 以下の例のURL。

    ディープリンク機能を使用するには、クエリ文字列にtimeパラメータを追加する必要があります。 ディープリンク の資料をご参照ください。

    1. の中に Playersモジュール、下にスクロールして ソーシャル共有 セクションを選択し、 はい 共有を許可する。
    2. 変更を保存して公開します player.
    3. 生成したら ソーシャルメタタグ次のように更新します。
      • 64-67:Twitterのカードタイプを player 、あなたのTwitterサイト、タイトルと説明。
      • ライン68:ビデオのサムネイル画像を指します。

      • ライン69:あなたの Brightcove Player。 クエリパラメータが videoId 、および player ビデオの15秒のポイントから自動的に再生を開始します。 これは、Twitterで動画にディープリンクする方法です。
      • 70〜71行目: player 寸法
      • ライン72:あなたのHTMLページのURLを指します。 Brightcove Player.
    	<!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>

    1. の中に Playersモジュール、下にスクロールして ソーシャル共有 セクションを選択し、 はい 共有を許可する。
    2. 変更を保存して公開します player.
    3. 生成したら ソーシャルメタタグ次のように更新します。
      • 139-142:Twitterのカードタイプを player 、あなたのTwitterサイト、タイトルと説明。
      • ライン143:ビデオのサムネイル画像を指します。

      • ライン144:あなたの Brightcove Player。 クエリパラメータが videoId 、および player ビデオの15秒のポイントから自動的に再生を開始します。 これは、Twitterで動画にディープリンクする方法です。
      • 145〜146行目: player 寸法
      • ライン147:あなたのHTMLページのURLを指します。 Brightcove Player.
    	<!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>
    1. 有効なメタタグがあることを忘れないでください。 検証 の項目を検索します。

    Twitterメタタグの設定の詳細については、以下を参照してください。

    有効にする

    手順に従ってページにメタタグを含めると、FacebookとTwitterの両方でページを検証できます。 いずれかの検証プロセスでエラーが発生した場合は、 player 必要に応じて構成。

    Facebook

    Facebookの場合は、 Facebookのデバッガ メタタグを含むページにURLを貼り付けてクリックします デバッグ 検証します。

    Twitter

    Twitterの場合は、 カードバリデーター、メタタグが含まれているページにURLを貼り付けてクリックします プレビューカード 検証します。 検証の利点は、Twitterがあなたのウェブサイトの確認を依頼し、あなたが待機リストに入ってTwitterカードの承認を受けることです。

    共有URLのカスタマイズ

    ソーシャルメディアプラグインのより高度な実装は、 ページはめ込みコード から Playersモジュール。 これにより、ページコード内から構成オプションを渡すことができます。 これを行うXNUMXつの理由は、カスタムを提供することです。 embedCode 別の値を共有する player ページ上のものよりも。

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

    1. Video Cloud Studioで PLAYERS モジュールと新しいのいずれかを作成します player または見つけます player プラグインを追加する場所。
    2. のリンクを選択します player を開く playerのプロパティ。
    3. 次の項目を選択します: Social 左側のナビゲーションメニューでチェックボックスをオフにしてください。
    4. 次の項目を選択します: プラグイン 左側のナビゲーションメニュー。
    5. 次の項目を選択します: スタイルシート 選択 スタイルシートを追加する ボタン。
      ソーシャルメディアスタイルシート
    6.   CSSのURL、 入る:
      		https://players.brightcove.net/videojs-social/3/videojs-social.css
    7. 次の項目を選択します: スクリプト 選択 スクリプトを追加する ボタン。
    8.   JavaScriptのURL、 入る:
      		https://players.brightcove.net/videojs-social/3/videojs-social.min.js
    9. 次の項目を選択します: 保存.
    10. 変更を player.

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

    1. 関連付ける player 一緒に作業している 高度な コードをHTMLページに挿入します。 ブラウザでページを実行している場合は、共有ボタンが player。 ソーシャルプラグインが初期化されると、それが行われます。

    1. HTMLページコードに、次のようにJavaScriptコードを追加します。
      • 23-24行目:あなたへの参照を取得します player.
      • 25-40:ソーシャル共有プラグインのオプションを設定します。 詳細については、 プロパティ の項目を検索します。
      • 行28:共有URLを設定します。
      • Line 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>
    1. HTMLページコードに、次のようにJavaScriptコードを追加します。
      • 147行目:あなたへの参照を取得します player.
      • 149-164:ソーシャル共有プラグインのオプションを設定します。 詳細については、 プロパティ の項目を検索します。
      • 153行目:スマートを使用するように共有URLを設定します Player。 このプロパティを使用して、共有URLを任意に設定できます。 Brightcove Player またはスマート Player.
      • Line 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>
    1. ソーシャル共有ボタンが表示されるはずです player。 コントロールバーで共有アイコンを探します。

      ソーシャルメディアのアイコン
    2. これで、ソーシャルメタタグを追加する準備ができました。 player ページ。 を参照してください メタタグ これらのタグを生成します。

    カスタムサービス

    プラグインは6つの人気のあるソーシャルメディアプラットフォームをサポートしていますが、カスタムサービスを使用して他のサービスを追加することもできます。 これを行うには、 options.customServices オブジェクト。 このオブジェクトはカスタムサービスオブジェクトの配列です。 簡単な設定例が表示され、次に例の詳細が表示されます。

    次の例では、XNUMXつのボタンを追加します。 XingとWhatsAppのXNUMX番目とXNUMX番目のボタン。 WhatsAppボタンはモバイルでのみ表示されます。 これらXNUMXつの例では、アイコンにFont Awesomeを使用しています。これは、 player は既にフォントを使用しているページに埋め込まれたページはめ込みですが、他のスタイルを使用することもできます。 XNUMXつ目は、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.title

    • タイプ:文字列
    • 共有先のタイトル。

    customService.className

    • タイプ:文字列
    • ボタンに追加するクラスまたはスペースで区切られたクラスのリスト。

    customService.classSuffix

    • タイプ:文字列
    • 接尾辞が付いている vjs-icon- ボタンのクラスを生成します。 if className 指定されていません。 Video.jsフォントには追加のソーシャルデスティネーションアイコンが含まれていないため、標準のデスティネーションのいずれかを置き換える場合にのみ便利です。

    customService.hrefTemplate

    • タイプ:文字列
    • 共有URLを生成するためのスティッキングテンプレート。マクロを含む可能性があります。 , , 。 の代わりに使用できる customService.href 関数を指定することはできません。たとえば、JSON文字列のオプションを Player Management API.

    customService.href

    • タイプ:文字列
    • 共有URLを生成する関数。 オブジェクトを取得して文字列を返す必要があります。 これが指定されていない限り、 hrefTemplate .

    customService.bgColor

    • タイプ:文字列
    • 背景色要素スタイルとして適用されるオプションのCSSカラー値。 ボタンがCSSでスタイルされている場合は必須ではありませんが、アイコンが既存のスタイルシートによってスタイルされている場合は便利です。

    customService.mobileOnly

    • タイプ:ブール型
    • デフォルト:false
    • If true ボタンはAndroidとiOSにのみ表示されます。

    既知の問題点

    画面に短い説明はありません

    ビデオの 短い説明 ビデオの再生中に共有ボタンをクリックすると、が表示されます。 共有情報を含むエンド画面で、 短い説明 表示されません。 これは設計どおりです。

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

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

    変更履歴

    見ます 変更履歴はこちら.


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