重要事項:本文件不適用於您目前選擇的格式 廣告!
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