動画をWebサイトに埋め込む際に使用する埋め込みコードや、簡易的に動画プレイヤーを表示したHTMLページのURLを取得する方法を解説します。

プレイリストを使用するか否かで取得方法が変わります。

新規に動画プレイヤーを作成した場合は、初回のみ埋め込みコードの登録作業が必要となります。
「埋め込みコードを新規作成する」をご参照ください。

 

1. 単体の動画を埋め込む場合の取得方法

1.1. PCとスマートフォン向け埋め込みコード(scriptタグ)を取得する

  1. 管理画面で「コンテンツ」を開き、埋め込みコードを取得したいコンテンツをクリックします。
  2. [PC/スマホ]タブが開かれているので、リストから使用したいプレイヤーの種類を選択します。
    ____1.png
    このリストに表示される埋め込みコードは、シングルプレイヤーを使用し作成した埋め込みコードのみとなります。
    ※出荷状態では、「SinglePlayer」という埋め込みコードを予めご用意しています。
  3. [クリップボードにコピー]をクリックすると、埋め込みコードをコピーできます。

 

1.2. ケータイ(フィーチャーフォン)向けURLを取得する

ケータイ(フィーチャーフォン)向けに、「動画URLが挿入されたaタグ」または「QRコード」を発行することができます。お好きなものをご利用ください。

  1. [ケータイ]タブをクリックすると、ケータイ動画のURL及びQRコードを確認できます。
    ____2.png
  2. [クリップボードにコピー]をクリックすると、ケータイ向け動画の埋め込みコードをコピーできます。
  3. QRコードを使用する場合は、画像を保存してください。

※ケータイ向け動画の埋め込みコードを利用するには、ケータイ向け動画の変換が完了している必要があります。詳しくは「ケータイ(フィーチャーフォン)向け動画・音声を登録する」をご参照ください。

 

1.3. YouTubeのURLを取得する

  1. [YouTube]タブをクリックすると、YouTube上にアップロードされた動画のURLを確認できます。
    ____3.png
  2. [クリップボードにコピー]をクリックすると、YouTube上の動画のURLをコピーできます。

 

1.4. Facebookの埋め込みコード(OGP)を取得する

  1. [Facebook]タブをクリックすると、Facebookの埋め込みコード(OGP)を確認できます。
    ____4.png
  2. [クリップボードにコピー]をクリックすると、埋め込みコード(OGP)をコピーできます。
  3. 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&amp;apibase=https://cc.miovp.com &amp;embedkey=xxxxxxxxxxx">
    <meta property="og:video:secure_url" content="https://cc.miovp.com/ /001/eviry/swf/videoplayer.swf?mode=ogp&amp;apibase=https://cc.miovp.com &amp;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>
    

    ※サンプルコードの埋め込みコードは動作しません。管理画面「コンテンツ」のコンテンツ詳細より取得した埋め込みコードを編集しご利用ください。

  4. 設定したWebページのURLをFacebookのウォール上に貼り付けし投稿することで閲覧可能となります。
    facebook_wall-2.png
    Facebookウォール上には、サムネイル画像、タイトル、リンク先URL、説明文が表示されます。
    ※Facebookの仕様上、PCのみウォール上でインライン再生が可能となり、その他の端末はWebページへ遷移します。
    ※アノテーション・字幕機能には対応しておりません。

 

1.5. 配信用HTMLページのURLを取得する

 プレイヤーが埋め込まれた簡易HTMLページのURLを取得することができます。

  1. [PC/スマホ]タブが表示された状態で、使用したいプレイヤーを選択します。
    ____________.png
  2. [HTML]タブ > [クリップボードにコピー]の順にクリックすると、URLをコピーできます。
    __________2019-09-26_13_10_51.png

 

1.6. iframeタグを取得する

iframe内に動画プレイヤーを設置したHTMLページを表示するタグを取得することができます。
ご利用のCMSなどの制限により、scriptタグがご利用いただけない場合にご利用ください。

  1. [PC/スマホ]タブが表示された状態で、使用したいプレイヤーを選択します。
  2. [iframe]タブをクリックし、[クリップボードにコピー]をクリックすると、iframeタグをコピーできます。

 注意

  • iframeのサイズを変更する際は、プレイヤーをレスポンシブ設定にして、設置するWebページ側のCSSにて調整をお願いいたします。
  • ワンタイム機能をご利用の場合、iframeタグ自体に有効期限が設定されます。有効期限は、タグの発行後30分となります。
  • iframeタグで動画等を埋め込んだ場合、お客様のご利用環境によっては、scriptタグによる埋め込みとは異なる動作をする可能性があります。ご利用の際は、事前に動作確認を行なうことをおすすめします。

 

1.7. PDFの埋め込みコードを取得する

  1. リストから使用したいPDFプレイヤーを選択してください。
    リストにはPDFに対応したプレイヤーのみ表示されます。
    新規作成する場合は「音声・PDFプレイヤーを新規作成する」をご確認ください。
    pdf.png
  2. 「PC/スマホ」「HTML」「iframe」の中で、使用したいタブをクリックします。
  3. [クリップボードにコピー]をクリックすると、埋め込みコードをコピーできます。

 

2. プレイリストを使用する場合の取得方法

  1. 管理画面の[埋め込みコード]画面を開き、埋め込みたいプレイリストが設定されている埋め込みコードを選択します。
    __________2019-09-26_14_38_02.png
  2. 「再生位置」でプレイリスト内で再生を開始したい動画を選択します。指定した動画から順に再生が始まります。
    ※プレイリストの先頭から再生する場合は設定不要です。
  3. 「埋め込みコード(PC/スマホ用)」「HTML」「iframe」タブから、生成したい埋め込みコードの種類を選択します。
  4. [クリップボードにコピー]をクリックすると、設定した開始位置埋め込みコードをコピーできます。
  5. [プレビュー]をクリックすると、プレイヤーのプレビューが確認できます。

 

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>

 

この記事は役に立ちましたか?
5人中1人がこの記事が役に立ったと言っています