amp-video

簡介

使用 <amp-video> 將影片嵌入您的 AMP HTML 檔案。影片來源檔案必須透過 HTTPS 提供。

設定

匯入 <amp-video> 元件。

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

基本用法

包含控制器的簡易影片。<amp-video> 支援下列格式：mp4、webm、ogg 以及所有 HTML5 影片標記支援的格式，包括 HLS。

您的瀏覽器不支援 HTML5 影片。

<amp-video width="480" height="270" src="/static/samples/video/tokyo.mp4" poster="/static/samples/img/tokyo.jpg" layout="responsive" controls>
  <div fallback>
    <p>Your browser doesn't support HTML5 video.</p>
  </div>
  <source type="video/mp4" src="/static/samples/video/tokyo.mp4">
  <source type="video/webm" src="/static/samples/video/tokyo.webm">
</amp-video>

自動播放

設定 autoplay 會在影片捲動至/移出支援的瀏覽器上的檢視畫面時，自動播放/暫停影片。

影片會在自動播放開始前自動靜音，當使用者輕觸影片時，影片會取消靜音。

如果使用者曾與影片互動 (例如：靜音/取消靜音、暫停/繼續等)，且影片捲動至或移出檢視畫面，則影片的狀態會維持使用者離開時的狀態。

您的瀏覽器不支援 HTML5 影片。

<amp-video width="720" height="405" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png" layout="responsive" controls autoplay>
  <div fallback>
    <p>Your browser doesn't support HTML5 video.</p>
  </div>
</amp-video>

HLS 支援

AMP 透過 HLS 支援自適應位元率影片，前提是瀏覽器支援該格式。(請注意，雖然大多數行動瀏覽器 (包括 Chrome 和 Safari) 支援 HLS，但鮮少有桌機瀏覽器支援。)

下方影片的位元率已燒錄至影片檔案本身，以便更容易發現瀏覽器在串流之間切換的時間。如果您的瀏覽器不支援 HLS，您會看到「No HLS」。如果您需要以適當格式建立檔案，我們建議您研究 shaka packager。

您的瀏覽器不支援 HTML5 影片。

<amp-video width="480" height="270" poster="/static/samples/img/tokyo.jpg" layout="responsive" controls autoplay>
  <div fallback>
    <p>Your browser doesn't support HTML5 video.</p>
  </div>
  <source type="application/vnd.apple.mpegurl" src="/static/samples/video/tokyo.m3u8">
  <source type="video/mp4" src="/static/samples/video/tokyo-no-hls.mp4">
</amp-video>

自訂媒體通知

透過在 AMP 上實作 MediaSessionAPI，您現在可以透過 artist、album、artwork 和 title 屬性顯示描述播放媒體的豐富通知。請參閱本教學課程以瞭解詳情。

<amp-video autoplay src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png" artwork="img/bigbuckbunny.jpg" title="Big Buck Bunny" album="Blender" artist="Blender Foundation" width="720" height="405" layout="responsive" controls>
</amp-video>

旋轉以全螢幕顯示

設定 rotate-to-fullscreen 會在使用者將裝置旋轉為橫向模式時，自動以全螢幕顯示影片 (如果影片是手動播放且可見)。

請參閱更進階的範例，瞭解如何顯示使用者提示，告知使用者可以旋轉裝置以進入全螢幕模式。

旋轉以全螢幕顯示

您的瀏覽器不支援 HTML5 影片。

<amp-video width="720" height="405" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png" layout="responsive" controls rotate-to-fullscreen>
  <div class="video-hint-container" id="video-hint">
    <div class="video-hint">Rotate for fullscreen</div>
  </div>
  <div fallback>
    <p>Your browser doesn't support HTML5 video.</p>
  </div>
</amp-video>

需要進一步說明嗎？

如果本頁面的說明未涵蓋您的所有問題，請隨時聯絡其他 AMP 使用者，討論您的確切使用案例。

前往 Stack Overflow

有未說明的特色功能嗎？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題提供一次性的貢獻。

在 GitHub 上編輯範例

由 @sebastianbenz 撰寫