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 video 標籤支援的所有格式，包括 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 撰寫