重要提示:此文档不适用于您当前选择的格式电子邮件!
amp-soundcloud
描述
显示 Soundcloud 片段。
必需的脚本
<script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-1.0.js"></script>
<script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-1.0.js"></script> <link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-soundcloud-1.0.css">
用法
显示 Soundcloud 片段。
在有效的 AMP 文档之外的独立使用
Bento 允许您在非 AMP 页面中使用 AMP 组件,而无需完全提交到有效的 AMP。您可以将这些组件放置在使用不支持 AMP 的框架和 CMS 的实现中。请阅读我们的指南 在非 AMP 页面中使用 AMP 组件了解更多信息。
要查找 amp-soundcloud
的独立版本,请参阅 bento-soundcloud
。
示例
使用响应式布局时,示例中的 width
和 height
应该可以为 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" )。 |
width 和 height | amp-soundcloud 的布局设置为 fixed-height ,它会填充所有可用的水平空间。这对于“经典”模式是理想的,但是对于“视觉”模式,建议高度为 300px、450px 或 600px,按照 Soundcloud 嵌入代码的建议。这将允许片段的内部元素在移动设备上正确调整大小。 |
验证
请参阅 AMP 验证器规范中的 amp-soundcloud 规则。
需要更多帮助?
您已经阅读本文档十几次了,但它并没有真正涵盖您的所有问题?也许其他人也有同样的感觉:在 Stack Overflow 上联系他们。
转到 Stack Overflow 发现错误或缺少功能?AMP 项目强烈鼓励您的参与和贡献!我们希望您成为我们开源社区的持续参与者,但也欢迎您对您特别热衷的问题进行一次性贡献。
转到 GitHub