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 支援自適應位元率影片，前提是瀏覽器支援 HLS。(請注意，雖然大多數行動瀏覽器 (包括 Chrome 和 Safari) 支援 HLS，但很少有桌上型電腦瀏覽器支援 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