amp-tiktok

实验性

说明

显示 TikTok 视频嵌入。

必需脚本

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

支持的布局

填充固定固定高度 flex-item 固有不显示响应式

用法

amp-tiktok 组件在您的页面上嵌入 TikTok 视频。

<amp-tiktok
  width="325"
  height="575"
  data-src="6718335390845095173"
></amp-tiktok>

行为

amp-tiktok 组件在 iframe 中显示 TikTok 视频。你可以指定 width、height 和 data-src 属性。amp-tiktok 不支持自动播放，需要用户交互才能播放视频。

避免布局偏移

通过将 amp-tiktok 元素上的 width 和 height 属性与视频播放器的大小匹配，防止布局偏移。

默认情况下，amp-tiktok iframe 的宽度为 325px，高度约为 575px。嵌入式 TikTok 视频播放器的默认高度取决于 TikTok 标题的长度和内容。为了显示整个视频，amp-tiktok 组件会调整大小以匹配播放器高度。你可以通过定义宽度和高度与视频播放器匹配来避免这种情况。

<amp-tiktok
  width="325"
  height="731"
  data-src="6718335390845095173"
></amp-tiktok>

在游乐场中打开此代码段

如果你选择将宽度设置为大于 325px 的值，iframe 将保持 325px，并水平居中于该空间。周围的空间将为空。

如果你选择将高度设置为大于 iframe 高度的高度，高度将保持 iframe 的高度。

占位符

有两种方法可以设置占位符图片

将 data-src 属性指向图片 URL
将 TikTok 提供的 cite 属性（通过 blockquote 提供）指向图片 URL。

属性

`data-src`

data-src 属性可以包含两个值之一：视频 ID 或 TikTok 详情页的完整 URL。

带视频 ID 的示例

<amp-tiktok
  width="325"
  height="575"
  data-src="6948210747285441798"
></amp-tiktok>

在游乐场中打开此代码段

带源 URL 的示例

<amp-tiktok
  width="325"
  height="575"
  data-src="https://www.tiktok.com/@scout2015/video/6948210747285441798"
></amp-tiktok>

在游乐场中打开此代码段

除了 data-src 属性，amp-tiktok 还允许使用 TikTok 生成的嵌入代码进行显示。

要使用此方法，请从 TikTok 嵌入代码中复制块引用

请参阅（TikTok 嵌入文档）[https://developers.tiktok.com/doc/Embed] 以查找 TikTok 的嵌入代码。
复制嵌入代码并将其作为 amp-tiktok 元素的子元素添加。
将 placeholder 属性添加到 blockquote。
从 blockquote 中删除 style 属性。

@countingprimes
VIM 很棒....直到你开始在看到的每个文本编辑器中输入命令。我要为我所有不必要的 ":wq" 道歉
♬ 原声 - countingprimes

<amp-tiktok width="300" height="800">
<blockquote
  placeholder
  class="tiktok-embed"
  cite="https://www.tiktok.com/@countingprimes/video/6948210747285441798"
  data-video-id="6948210747285441798"
>
  <section>
    <a
      target="_blank"
      title="@countingprimes"
      href="https://www.tiktok.com/@countingprimes"
      >@countingprimes</a
    >
    <p>
      VIM is great.... right up until you start typing the commands into every
      single text editor you see. I’d like to apologize for all my unneeded
      ":wq"’s
    </p>
    <a
      target="_blank"
      title="♬ original sound - countingprimes"
      href="https://www.tiktok.com/music/original-sound-6948210588145175302"
      >♬ original sound - countingprimes</a
    >
  </section>
</blockquote>
</amp-tiktok>

在游乐场中打开此代码段

辅助功能

如果用户提供了 aria-label，则该标签将传播到 iframe。如果用户提供了 oEmbed 源 URL 作为 data-src，则 TikTok 的标题将用“Tiktok: “标题””的格式作为 aria-label。否则，aria-label 将默认为“TikTok”。

需要更多帮助？

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

转到 Stack Overflow

发现了一个错误或缺少一个功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的持续参与者，但我们也欢迎您对您特别热衷的问题进行一次性贡献。

转到 GitHub