AMP

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

amp-soundcloud

实验性
Bento

描述

显示 Soundcloud 片段。

 

必需脚本

<script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-1.0.js"></script>

用法

显示 Soundcloud 片段。

在有效的 AMP 文档之外独立使用

Bento 允许您在非 AMP 页面中使用 AMP 组件,而无需承诺完全有效的 AMP。您可以将这些组件放置在使用不支持 AMP 的框架和 CMS 的实现中。请阅读我们的指南在非 AMP 页面中使用 AMP 组件,了解更多信息。

要查找 amp-soundcloud 的独立版本,请参阅bento-soundcloud

示例

使用响应式布局时,示例中的 widthheight 应生成 1:1 宽高比嵌入的正确布局

可视化模式

<amp-soundcloud
  width="480"
  height="480"
  layout="responsive"
  data-trackid="243169232"
  data-visual="true"
></amp-soundcloud>

经典模式

<amp-soundcloud
  width="480"
  height="480"
  layout="responsive"
  data-trackid="243169232"
  data-color="ff5500"
></amp-soundcloud>

属性

data-trackid 如果未定义 data-playlistid,则此属性为必需。
此属性的值是曲目的 ID,一个整数。
data-playlistid 如果未定义 data-trackid,则此属性为必需。此属性的值是播放列表的 ID,一个整数。
data-secret-token(可选) 曲目的密钥令牌(如果是私有的)。
data-visual(可选) 如果设置为 true,则显示全宽“可视化”模式;否则,它将显示为“经典”模式。默认值为 false
data-color(可选) 此属性是“经典”模式的自定义颜色覆盖。该属性在“可视化”模式中将被忽略。指定一个十六进制颜色值,不带前导 #(例如,data-color="e540ff")。
宽度和高度 amp-soundcloud 的布局设置为 fixed-height,它会填充所有可用的水平空间。这对于“经典”模式来说是理想的,但对于“可视化”模式,建议高度为 300px、450px 或 600px,根据 Soundcloud 嵌入代码。这将允许剪辑的内部元素在移动设备上正确调整大小。

验证

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

需要更多帮助?

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

前往 Stack Overflow
发现错误或缺少功能?

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

前往 GitHub