重要事項:此文件不適用於您目前選取的格式電子郵件!
amp-story-player
描述
一個播放器,用於在您自己的 AMP 網站中嵌入和播放您喜愛的故事。
必要腳本
<script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"></script>
支援的版面配置
用法
使用 amp-story-player
在 AMP 網頁中嵌入和播放故事。
嵌入到 AMP 網頁中
以下程式碼片段示範了在 AMP 網頁中嵌入 <amp-story-player>
。
<head> <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js" ></script> </head> <body> <amp-story-player layout="fixed" width="360" height="600"> <a href="https://preview.amp.dev/documentation/examples/introduction/stories_in_amp/"> <img src="https://amp.dev.org.tw/static/samples/img/story_dog2_portrait.jpg" width="360" height="600" loading="lazy" data-amp-story-player-poster-img> Stories in AMP - Hello World </a> </amp-story-player> </body>
指定嵌入的故事
<amp-story-player>
元件包含一個或多個 <a>
標籤。將每個標籤的 href 屬性指向故事 URL。
將故事標題放在 <a>
標籤內。這能提供更好的使用者體驗,並允許搜尋引擎檢索嵌入的故事。
屬性
版面配置
支援任何尺寸定義的版面配置
- fixed
- fixed-height
- responsive
- fill
驗證
請參閱 AMP 驗證器規範中的 amp-story-player 規則。
需要更多協助嗎?
您已閱讀此文件十幾次,但它仍然沒有涵蓋您的所有問題?也許其他人也有相同的感受:請在 Stack Overflow 上與他們聯繫。
前往 Stack Overflow 發現錯誤或缺少功能?AMP 專案非常鼓勵您的參與和貢獻!我們希望您能成為我們開源社群的長期參與者,但我們也歡迎您針對您特別關注的問題做出一次性貢獻。
前往 GitHub