iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 23
0
Modern Web

AMP系列 第 23

AMP(Lession 23) - 播放Youtube影片

播放Youtube影片

Youtube 當機 網友:世界末日! Youtube太重要了,現在我們來看看在 AMP 的世界裡, Youtube 又該如何引用吧!

基本範例

<amp-youtube
    data-videoid="mGENRKrdoGY"
    layout="responsive"
    width="480" height="270"></amp-youtube>
<amp-youtube
        id="myLiveChannel"
        data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
        width="358"
        height="204"
        layout="responsive">
    <amp-img
        src="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg"
        placeholder
        layout="fill"
        />
  </amp-youtube>

Required Script

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

Attribute

autoplay - 自動播放

data-live-channelid

可以從影片網址上看出來。例如: https://www.youtube.com/embed/live_stream?channel=UBB8Kb4pxYzsDsHxzBfnid4QUCB8Kb4pxYzsDsHxzBfnid4Q 就是 channel id

data-param-*

所有 data-param-* 屬性都將作為查詢參數添加到 YouTube iframe src中。

Key 值與 value 值需做 URI encoded 。 key 值格式要為 camel cased 。

data-param-controls=1 會變為 &controls=1

credentials - 定義Fetch API指定的憑證選項。

非必填,預設的值為 include;可填的值有 omitinclude

common attributes

詳細請看


成果可以看這


參考來源:


上一篇
AMP(Lession 22) - 影片播放
下一篇
AMP(Lession 24) - AMP 中的 iframe
系列文
AMP30

尚未有邦友留言

立即登入留言