埋め込みコード/URLの取得 | millvi

millviの埋め込みコード/URLの取得手順について解説します。

埋め込みコードは埋め込み先によって取得するタグが変わります。

 

■埋め込みコードの種類(全7種類)

  • PC/スマートフォン向けscriptタグ
  • PC/スマートフォン向けiframeタグ
  • 配信用HTMLページURL
  • ケータイ(フィーチャーフォン)向けURL
  • YouTube URL
  • Facebook埋め込みコード(OGP)
  • プレイリスト向け

 

<目次>
1. PC/スマートフォン向けscriptタグ
2. PC/スマートフォン向けiframeタグ
3. 配信用HTMLページURL
4. ケータイ(フィーチャーフォン)向けURL
5. YouTube URL
6. Facebook埋め込みコード(OGP)
7. プレイリスト向け


 

1. PC/スマートフォン向けscriptタグ

 

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

 


 

2. PC/スマートフォン向けiframeタグ

 

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

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

 注意

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

 


 

3. 配信用HTMLページURL

 

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

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

 注意

HTML(URL)はプレビュー用のURLとなります。Webサイトへ埋め込む際はscriptタグもしくはiframeタグをご利用ください。

 


 

4. ケータイ(フィーチャーフォン)向けURL

 

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

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

※ケータイ向け動画の埋め込みコードを利用するには、ケータイ向け動画の変換が完了している必要があります。詳しくは「ケータイ向けコンテンツ登録 | millvi」をご参照ください。

 


 

5. YouTube URL

 

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

 


 

6. 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ページへ遷移します。
    ※アノテーション・字幕機能には対応しておりません。

 


 

7. プレイリスト向け

 

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

 


 

8. Webサイトへ公開

 

scriptタグやiframeタグを使用する場合は、発行した埋め込みコードをHTMLファイルのBODY内に挿入し、ページを公開すると完成です!

Webサイトへの公開手順はクイックスタートガイド[Step4. Webサイトへ公開する]をご確認ください。

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