動画をWebサイトに埋め込む際に使用する埋め込みコードや、簡易的に動画プレイヤーを表示したHTMLページのURLを取得する方法を解説します。
プレイリストを使用するか否かで取得方法が変わります。
- 単体の動画を埋め込む場合の取得方法
- プレイリストを使用する場合の取得方法
新規に動画プレイヤーを作成した場合は、初回のみ埋め込みコードの登録作業が必要となります。
「埋め込みコードを新規作成する」をご参照ください。
1. 単体の動画を埋め込む場合の取得方法
1.1. PCとスマートフォン向け埋め込みコード（scriptタグ）を取得する
- 管理画面で「コンテンツ」を開き、埋め込みコードを取得したいコンテンツをクリックします。
- ［PC/スマホ］タブが開かれているので、リスト①から使用したいプレイヤーの種類を選択します。
このリストに表示される埋め込みコードは、シングルプレイヤーを使用し作成した埋め込みコードのみとなります。
※出荷状態では、「SinglePlayer」という埋め込みコードを予めご用意しています。 - ［クリップボードにコピー］②をクリックすると、埋め込みコードをコピーできます。
1.2. ケータイ（フィーチャーフォン）向けURLを取得する
ケータイ（フィーチャーフォン）向けに、「動画URLが挿入されたaタグ」または「QRコード」を発行することができます。お好きなものをご利用ください。
- ［ケータイ］タブをクリックすると、ケータイ動画のURL及びQRコードを確認できます。
- ［クリップボードにコピー］①をクリックすると、ケータイ向け動画の埋め込みコードをコピーできます。
- QRコードを使用する場合は、画像②を保存してください。
※ケータイ向け動画の埋め込みコードを利用するには、ケータイ向け動画の変換が完了している必要があります。詳しくは「ケータイ（フィーチャーフォン）向け動画・音声を登録する」をご参照ください。
1.3. YouTubeのURLを取得する
- ［YouTube］タブをクリックすると、YouTube上にアップロードされた動画のURLを確認できます。
- ［クリップボードにコピー］をクリックすると、YouTube上の動画のURLをコピーできます。
1.4. Facebookの埋め込みコード（OGP）を取得する
- ［Facebook］タブ㉓をクリックすると、Facebookの埋め込みコード(OGP)を確認できます。
- ［クリップボードにコピー］⑳をクリックすると、埋め込みコード(OGP)をコピーできます。
- Facebookのウォールに投稿する予定のWebページのHTMLファイルに、取得した埋め込みコード（OGP）を以下のように<head></head>の間に追記します。
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>Test</title> <!-- 以下サンプル --> <meta property="og:video" content="https://*.cloudfront.net/001/eviry/swf/videoplayer.swf?mode=ogp&apibase=https://cc.miovp.com &embedkey=xxxxxxxxxxx"> <meta property="og:video:secure_url" content="https://cc.miovp.com/ /001/eviry/swf/videoplayer.swf?mode=ogp&apibase=https://cc.miovp.com &embedkey=xxxxxxxxxxx"> <meta property="og:video:type" content="application/x-shockwave-flash"> <meta property="og:video:width" content="320"> <meta property="og:video:height" content="240"> <meta property="og:image" content="https://cc.miovp.com/ fbimage/xxxxxxxxx "> <meta property="og:image:secure_url" content="https://cc.miovp.com/ fbimage/xxxxxxxx"> <meta property="og:title" content="サンプル動画2"> <meta property="og:description" content="サンプル動画2です。"> <!-- サンプルここまで --> </head> </html>※サンプルコードの埋め込みコードは動作しません。管理画面「コンテンツ」のコンテンツ詳細より取得した埋め込みコードを編集しご利用ください。
- 設定したWebページのURLをFacebookのウォール上に貼り付けし投稿することで閲覧可能となります。
Facebookウォール上には、サムネイル画像①、タイトル②、リンク先URL③、説明文④が表示されます。
※Facebookの仕様上、PCのみウォール上でインライン再生が可能となり、その他の端末はWebページへ遷移します。
※アノテーション・字幕機能には対応しておりません。
1.5. 配信用HTMLページのURLを取得する
プレイヤーが埋め込まれた簡易HTMLページのURLを取得することができます。
- ［PC/スマホ］タブが表示された状態で、使用したいプレイヤー①を選択します。
- ［HTML］タブ ＞ ［クリップボードにコピー］の順にクリックすると、URLをコピーできます。
1.6. iframeタグを取得する
iframe内に動画プレイヤーを設置したHTMLページを表示するタグを取得することができます。
ご利用のCMSなどの制限により、scriptタグがご利用いただけない場合にご利用ください。
- ［PC/スマホ］タブが表示された状態で、使用したいプレイヤー①を選択します。
- [iframe]タブをクリックし、[クリップボードにコピー]をクリックすると、iframeタグをコピーできます。
注意
1.7. PDFの埋め込みコードを取得する
- リストから使用したいPDFプレイヤーを選択①してください。
リストにはPDFに対応したプレイヤーのみ表示されます。
新規作成する場合は「音声・PDFプレイヤーを新規作成する」をご確認ください。
- 「PC/スマホ」「HTML」「iframe」の中で、使用したいタブをクリックします。
- ［クリップボードにコピー］②をクリックすると、埋め込みコードをコピーできます。
2. プレイリストを使用する場合の取得方法
- 管理画面の［埋め込みコード］①画面を開き、埋め込みたいプレイリストが設定されている埋め込みコード②を選択します。
- 「再生位置」③でプレイリスト内で再生を開始したい動画を選択します。指定した動画から順に再生が始まります。
※プレイリストの先頭から再生する場合は設定不要です。 - 「埋め込みコード（PC/スマホ用）」「HTML」「iframe」タブ④から、生成したい埋め込みコードの種類を選択します。
- ［クリップボードにコピー］⑤をクリックすると、設定した開始位置埋め込みコード⑯をコピーできます。
- ［プレビュー］⑥をクリックすると、プレイヤーのプレビューが確認できます。
3. 埋め込みコードの挿入
scriptタグやiframeタグを使用する場合は、発行した埋め込みコードをHTMLファイルのBODY内に挿入し、ページを公開すると完成です！
（簡易埋め込み例）
<!DOCTYPE HTML>
<html>
<body>
<p>動画埋め込みページ</p>
<!--埋め込みコード開始-->
<script type="text/javascript">var Eviry=Eviry||{};Eviry.Player||(Eviry.Player={});Eviry.Player.embedkey="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";</script>
<script type="text/javascript" src="https://d1euehvbqdc1n9.cloudfront.net/001/eviry/js/eviry.player.min.js"></script>
<!--埋め込みコード終了-->
</body>
</html>