AMP HTML 库提供的组件可划分为:

  • 内置:基础库中包含的组件,例如 amp-imgamp-pixel
  • 扩展:相对于基础库而言的扩展组件,必须作为自定义元素明确包含在文档中(例如 <script async custom-element="amp-audio" ...)。
  • 实验:已发布但尚不能广泛使用的组件。

若按类别,这些组件则可分别归为:

广告与分析

组件 说明
amp-ad 一种容器,用于展示广告。
amp-ad-exit 为 A4A (AMP for Ads) 的广告退出事件提供可配置行为。
amp-analytics 从 AMP 文档获取分析数据。
amp-auto-ads 通过使用远程提供的配置文件,向 AMP 网页中动态投放广告。
amp-call-tracking 动态替换超链接中的电话号码,以启用来电跟踪。
amp-experiment 可用于在 AMP 文档上进行用户体验实验。
amp-pixel 一种跟踪像素,用于统计网页浏览量。
amp-sticky-ad 提供一种方式,以在页面底部持续显示广告内容。

动态内容

组件 说明
amp-access-laterpay 可让发布者轻松集成 LaterPay 微支付平台。
amp-access 提供 AMP 付费墙和订阅支持。
amp-bind 允许元素发生变化,以通过数据绑定关系和与 JS 相似的简单表达式来响应用户操作或数据变更。
amp-form 提供表单支持。
amp-gist 显示 GitHub Gist
amp-install-serviceworker 安装 ServiceWorker。
amp-list 动态下载数据并使用模板创建列表项。
amp-live-list 提供一种方式,以实时地显示和更新内容。
amp-mustache 允许呈现 Mustache.js 模板。
amp-selector 表示一种控件,可显示选项菜单并让用户从中选择。
amp-user-notification 向用户显示可关闭的通知。
amp-web-push 让用户能够订阅网络推送通知

布局

组件 说明
amp-accordion 提供一种方式,让观看者可以大致了解网页内容并随意跳至想查看的部分。
amp-app-banner 一个封装容器和极简界面,用于呈现一个跨平台且具有固定位置的横幅,以显示应用安装号召性用语。
amp-carousel 沿着一条横轴显示多个相似的内容片段。
amp-fx-flying-carpet 将其子对象封装在一个独特的全屏滚动容器中,可让您在不占用整个视口的情况下展示全屏广告。
amp-fx-parallax 一种属性,可让元素呈现 3D 透视效果。
amp-iframe 显示 iframe。
amp-lightbox 可带来“灯箱”或类似体验。
amp-position-observer 在用户滚动屏幕并调度可与其他组件一起使用的事件时,监控视口内某个元素的位置。
amp-sidebar 提供一种方式,以显示那些供临时访问的元内容,例如导航、链接、按钮、菜单。

媒体

组件 说明
amp-3q-player 嵌入来自 3Q SDN 的视频。
amp-anim 管理动画图片,通常是 GIF 格式。
amp-apester-media 显示 Apester 智能单元。
amp-audio 替换 HTML5 audio 标记。
amp-brid-player 显示 Brid.tv 播放器。
amp-brightcove 显示 Brightcove 视频云执行播放器。
amp-dailymotion 显示 Dailymotion 视频。
amp-google-vrview-image 显示 VR 图片。
amp-hulu 显示简单的嵌入式 Hulu 视频。
amp-ima-video 为与 IMA SDK 集成的插播视频广告嵌入一个视频播放器。
amp-image-lightbox 可带来“图片灯箱”或类似体验。
amp-img 替换 HTML5 img 标记。
amp-imgur 显示 Imgur 帖子。
amp-izlesene 显示 Izlesene 视频。
amp-jwplayer 显示由云托管的 JW 播放器
amp-kaltura-player 显示 Kaltura 的视频平台中使用的 Kaltura 播放器。
amp-nexxtv-player 显示来自 nexxOMNIA 平台的媒体流。
amp-o2-player 显示 AOL O2Player
amp-ooyala-player 显示 Ooyala 视频。
amp-playbuzz 显示任何 Playbuzz 内容(例如列表、意见调查,等等)。
amp-reach-player 显示 Beachfront Reach 视频播放器。
amp-soundcloud 显示 Soundcloud 剪辑。
amp-springboard-player 显示 Springboard 平台 视频播放器。
amp-video 替换 HTML5 video 标记。
amp-vimeo 显示 Vimeo 视频。
amp-youtube 显示 YouTube 视频。

呈现

组件 说明
amp-animation 定义并显示动画。
amp-dynamic-css-classes 在 HTML 元素上添加几个动态 CSS 类名称。
amp-fit-text 放大或缩小字体,以适合给定空间内的内容。
amp-font 触发并监控自定义字体的加载。
amp-timeago 通过将日期格式设为“多长时间前”(例如 3 小时前)来提供模糊的时间戳。
amp-viz-vega 显示使用 Vega 可视化语法创建的可视内容。

社交

组件 说明
amp-facebook-comments 嵌入 Facebook 评论插件。
amp-facebook-like 嵌入 Facebook 的“赞”按钮插件。
amp-facebook 显示 Facebook 帖子或视频。
amp-gfycat 显示 Gfycat 视频 GIF。
amp-instagram 显示 Instagram 嵌入内容。
amp-pinterest 显示 Pinterest 微件或“Pin”按钮。
amp-reddit 显示嵌入的 Reddit 评论或帖子。
amp-social-share 显示社交分享按钮。
amp-twitter 显示 Twitter 微博。
amp-vine 显示简单的 Vine 嵌入内容。