印刷する

その他

AMP HTML埋め込み

AMPとは"Accelerated Mobile Page"の略です。これはGoogleによるプロジェクトで、高速で閲覧できるモバイルページを作成するように設計された簡易HTMLフレームワークです。 AMPの詳細についてはこちらを参照してください。

ここではAMPページの作成方法ではなく、INTER-STREAM動画プレーヤーをAMPページへ埋め込む方法のみ記します。
AMPページの作成方法についてはこちらをご確認ください。

動画プレーヤーの埋め込み/実装例

AMP HTMLページは特別なHTMLタグのセットを使用するため、標準のコードを使用して動画プレーヤーを埋め込む事は出来ません。
AMPページへの埋め込みには特別な<amp-iframe>タグが必要になります。

DEMO

実装時の注意
・URLは"https://"である必要があります。
・"custom-element"並びに"amp-iframe"がヘッダで定義されていなければなりません。

      <script custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" async></script>

・<amp-iframe>タグ内のsrc属性は"https://(your_url)/embed.php?id=clip_id&w=1&h=1"となります。
・プレースホルダの画像は動画のポスター画像URLに対応しています（コンテンツ管理セクションの動画編集ページから取得できます）。

例）400px*225pxの固定サイズで動画プレーヤーを埋め込む為のサンプルコード

    <div id="videoPlayer" style="width:400px; height:225px; margin: auto auto;">
    <amp-iframe 
      layout="responsive"
      width="400" 
      height="225"
      sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
      scrolling="no"
      frameborder="0"
      allowfullscreen
      src="https://inter-stream.jp/embed.php?id=46&w=1&h=1" >
        <amp-img layout="fill" src="https://inter-stream.jp/uploads/images/clip_46_1555546446_poster.jpg" placeholder></amp-img>
    </amp-iframe>
    </div>

例）可変サイズ（レスポンシブ）の動画プレーヤーを埋め込む為のサンプルコード

    <amp-iframe 
      layout="responsive"
      width="400" 
      height="225"
      sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
      scrolling="no"
      frameborder="0"
      resizable
      allowfullscreen
      src="https://inter-stream.jp/embed.php?id=46&w=1&h=1" >
        <amp-img layout="fill" src="https://inter-stream.jp/uploads/images/clip_46_1555546446_poster.jpg" placeholder></amp-img>
        <div overflow tabindex=0 role=button aria-label="Watch more" style="display:none;">Watch more!</div>
    </amp-iframe>
AMP HTMLページのサンプル
<!doctype html>
  <html amp lang="en">
    <head>
      <meta charset="utf-8">
      <title>AMP HTML埋め込みサンプル | INTER-STREAMのドキュメント</title>
      <link rel="canonical" href="https://inter-stream.jp/interstream_support/docs/amp_sample.html">
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
      <script custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" async></script>
      <script async src="https://cdn.ampproject.org/v0.js"></script>
      <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    </head>
    <body>

    <h1>AMP HTML埋め込みサンプル</h1>
    
    <h3>固定サイズ</h3>
    <div id="videoPlayer" style="width:400px; height:225px; margin: auto auto;">
    <amp-iframe 
      layout="responsive"
      width="400" 
      height="225"
      sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
      scrolling="no"
      frameborder="0"
      allowfullscreen
      src="https://inter-stream.jp/embed.php?id=46&w=1&h=1" >
        <amp-img layout="fill" src="https://inter-stream.jp/uploads/images/clip_46_1555546446_poster.jpg" placeholder></amp-img>
    </amp-iframe>
    </div>
    
    <h3>可変サイズ/レスポンシブ</h3>
    <amp-iframe 
      layout="responsive"
      width="400" 
      height="225"
      sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
      scrolling="no"
      frameborder="0"
      resizable
      allowfullscreen
      src="https://inter-stream.jp/embed.php?id=46&w=1&h=1" >
        <amp-img layout="fill" src="https://inter-stream.jp/uploads/images/clip_46_1555546446_poster.jpg" placeholder></amp-img>
        <div overflow tabindex=0 role=button aria-label="Watch more" style="display:none;">Watch more!</div>
    </amp-iframe>

    </body>
  </html>