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.org.cn/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>
标签内。这可以提供更好的用户体验,并允许搜索引擎抓取嵌入的故事。
属性
layout
支持任何尺寸定义的布局
- fixed
- fixed-height
- responsive
- fill
验证
请参阅 AMP 验证器规范中的 amp-story-player 规则。
需要更多帮助?
您已经阅读了此文档很多遍,但它并没有真正涵盖您所有的问题? 也许其他人也有同感:在 Stack Overflow 上联系他们。
转到 Stack Overflow 发现错误或缺少功能?AMP 项目强烈鼓励您的参与和贡献! 我们希望您成为我们开源社区的长期参与者,但我们也欢迎您为自己特别感兴趣的问题做出一次性贡献。
转到 GitHub