iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 22
0
Modern Web

AMP系列 第 22

AMP(Lession 22) - 影片播放

影片播放

說著說著,我們來看看影片在 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 之後
    https://ithelp.ithome.com.tw/upload/images/20181021/20078336yqcPHYKo7Z.png
    加上 noaudio 之前
    https://ithelp.ithome.com.tw/upload/images/20181021/200783360V61ZUTECK.png

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

  • common attributes

Docking (minimize to corner)

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


參考來源:


上一篇
AMP(Lession 21) - 在 AMP 頁面裡獲取數據 〈Access Trigger 篇〉
下一篇
AMP(Lession 23) - 播放Youtube影片
系列文
AMP30

尚未有邦友留言

立即登入留言