
- Google AMP 教程
- Google AMP - 首頁
- Google AMP - 概述
- Google AMP - 簡介
- Google AMP - 圖片
- Google AMP - 表單
- Google AMP - 內嵌框架 (Iframes)
- Google AMP - 影片
- Google AMP - 按鈕
- Google AMP - 時間戳 (Timeago)
- Google AMP - Mathml
- Google AMP - 自動調整文字大小 (Fit Text)
- Google AMP - 日期倒計時
- Google AMP - 日期選擇器
- Google AMP - 故事 (Story)
- Google AMP - 選擇器
- Google AMP - 連結
- Google AMP - 字型
- Google AMP - 列表
- Google AMP - 使用者通知
- Google AMP - 下一頁
- Google AMP - 屬性
- 樣式和自定義 CSS
- Google AMP - 動態 CSS 類
- Google AMP - 動作和事件
- Google AMP - 動畫
- Google AMP - 資料繫結
- Google AMP - 佈局
- Google AMP - 廣告
- Google AMP - 分析
- Google AMP - 社交小工具
- Google AMP - 媒體
- HTML 頁面轉換為 AMP 頁面
- Google AMP - 基本語法
- Google AMP - 驗證
- Google AMP - 快取
- Google AMP - 自定義 JavaScript
- Google AMP - CORS
- Google AMP 有用資源
- Google AMP - 快速指南
- Google AMP - 有用資源
- Google AMP - 討論
Google AMP - 影片
amp 中的 amp-video 是一個標準的 HTML5 影片標籤,用於播放直接嵌入的影片。本章我們將瞭解如何使用 amp-video。
要使用 amp-video,我們需要新增以下指令碼:
<script async custom-element = "amp-video" src = "https://cdn.ampproject.org/v0/amp-video-0.1.js"> </script>
Amp-video 有一個 src 屬性,它包含要載入的影片資源,amp 會在執行時延遲載入它。此外,它的幾乎所有功能都與 HTML5 video 標籤相同。
以下是需要新增到 amp-video 的節點:
Source - 你可以使用此標籤新增不同的媒體檔案進行播放。
Track - 此標籤允許你為影片啟用字幕。
Placeholder - 此佔位符標籤會在影片開始播放前顯示內容。
Fallback - 當瀏覽器不支援 HTML5 影片時,將呼叫此標籤。
amp-video 標籤的格式
amp-video 標籤的格式如下所示:
<amp-video controls width = "640" height = "360" layout = "responsive" poster = "images/videoposter.png"> <source src = "video/bunny.webm" type = "video/webm" /> <source src = "video/samplevideo.mp4" type = "video/mp4" /> <div fallback> <p>This browser does not support the video element.</p> </div> </amp-video>
讓我們透過下面的工作示例來了解 amp-video:
示例
<!doctype html> <html amp lang = "en"> <head> <meta charset = "utf-8"> <script async src = "https://cdn.ampproject.org/v0.js"></script> <title>Google AMP - Amp Video</title> <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"> <meta name = "viewport" content = "width = device-width, minimum-scale = 1,initial-scale=1"> <style amp-boilerplate> body { -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both} @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body { -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none } </style> </noscript> <script async custom-element = "amp-video" src = "https://cdn.ampproject.org/v0/amp-video-0.1.js"> </script> </head> <body> <h3>Google AMP - Amp Video</h3> <amp-video controls width = "640" height = "360" layout = "responsive" poster = "images/videoposter.png"> <source src = "video/bunny.webm" type = "video/webm" /> <source src = "video/samplevideo.mp4" type = "video/mp4" /> <div fallback> <p>This browser does not support the video element.</p> </div> </amp-video> </body> </html>
輸出
上面程式碼的輸出如下所示:

amp-video 可用的屬性
amp-video 可用的屬性列在下面的表格中:
序號 | 屬性 & 描述 |
---|---|
1 | src 如果不存在 <source> 節點,則必須指定 src 屬性,並且它必須是 https:// URL。 |
2 | poster poster 屬性接受一個 img URL,在影片開始播放前顯示。 |
3 | autoplay 如果 amp-video 包含此屬性,並且瀏覽器支援,則會自動播放影片。影片將以靜音模式播放,使用者需要點選影片才能取消靜音。 |
4 | controls 如果 amp-video 包含此屬性,則會顯示類似於 HTML5 video 的影片控制元件。 |
5 | loop 如果 amp-video 包含此屬性,影片播放結束後會再次播放。 |
6 | crossorigin 如果影片資源位於不同的域,則此屬性會發揮作用。 |
7 | rotate-to-fullscreen 如果影片可見,當用戶將裝置旋轉到橫向模式後,影片會全屏顯示。 |
自動播放 AMP 影片
如果需要自動播放影片,可以使用 autoplay 屬性。此功能將根據瀏覽器支援情況生效。請注意,自動播放時影片將處於靜音狀態。使用者點選影片後,將取消靜音。
讓我們透過下面的工作示例來了解 autoplay 功能:
示例
<!doctype html> <html amp lang = "en"> <head> <meta charset = "utf-8"> <script async src = "https://cdn.ampproject.org/v0.js"></script> <title>Google AMP - Amp Video</title> <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"> <meta name = "viewport" content = "width=device-width,minimum-scale = 1, initial-scale = 1"> <style amp-boilerplate> body { -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both; -moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none } </style> </noscript> <script async custom-element = "amp-video" src = " https://cdn.ampproject.org/v0/amp-video-0.1.js"> </script> </head> <body> <h3>Google AMP - Amp Video Autoplay</h3> <amp-video controls width = "640" height = "360" layout = "responsive" poster = "images/videoposter.png" autoplay> <source src = "video/bunny.webm" type = "video/webm" /> <source src = "video/samplevideo.mp4" type = "video/mp4" /> <div fallback> <p>This browser does not support the video element.</p> </div> </amp-video> </body> </html>

你可以透過新增 controls 屬性來為影片啟用控制元件,如下面的程式碼所示:
<amp-video controls width = "640" height = "360" layout = "responsive" poster = "images/videoposter.png" autoplay> <source src = "video/bunny.webm" type = "video/webm" /> <source src = "video/samplevideo.mp4" type = "video/mp4" /> <div fallback> <p>This browser does not support the video element.</p> </div> </amp-video>