影片播放

說著說著，我們來看看影片在 amp 的世界裡是如何被使用的吧

Required Script

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

基本用法

把 <video> tag 改成 <amp-video> tag

<amp-video controls
  width="640"
  height="360"
  layout="responsive"
  poster="images/kitten-playing.png">
  <source src="videos/kitten-playing.webm"
    type="video/webm" />
  <source src="videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

Attributes

• src - 當你沒有 <source> 時，則需要在 <amp-video> 上設定

• poster - 代表影片的圖片

• autoplay - 是否自動播放

• controls - 是否要顯示出 play 、 stop 、 … 這些控制鈕

• controlsList -

• loop - 重複播放與否

• crossorigin - 跨網域與否

• disableremoteplayback -

• muted - 靜音，但此 attribute 已棄用

• noaudio - 如下圖所示，加上之後會隱藏 autoplay 的右下角這個 icon
  加上 noaudio 之後
  
  加上 noaudio 之前
  

• rotate-to-fullscreen - 當 user 把 device 旋轉為橫向時，會自動使影片變為 full screen

• common attributes

Docking (minimize to corner)

值得關注一點，如果你覺得 video player 原本的 UI 不好看，想要做些修改的話，你要怎麼做呢?在未來有一些 class name 可以幫助你做修改。

參考來源：

• AMP 官網 - amp-video
• Amp By Example - amp-video
• AMP 官網 - amp-video interface