AMP

重要提示:此文档不适用于您当前选择的格式广告

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>
在 Playground 中打开此代码片段

指定嵌入的故事

<amp-story-player> 组件包含一个或多个 <a> 标签。将每个标签的 href 属性指向故事 URL。

将故事的标题放在 <a> 标签内。这提供了更好的用户体验,并允许搜索引擎抓取嵌入的故事。

属性

layout

支持任何大小定义的布局

  • fixed
  • fixed-height
  • responsive
  • fill

验证

请参阅 AMP 验证器规范中的 amp-story-player 规则

需要更多帮助?

您已经阅读本文档很多次,但它并没有真正涵盖您所有的问题?也许其他人也有同样的感觉:在 Stack Overflow 上联系他们。

转到 Stack Overflow
发现错误或缺少功能?

AMP 项目强烈鼓励您的参与和贡献!我们希望您能成为我们开源社区的长期参与者,但也欢迎您为自己特别感兴趣的问题做出一次性贡献。

转到 GitHub