amp-tiktok

实验性

描述

显示 TikTok 视频嵌入。

所需脚本

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

支持的布局

fill fixed fixed-height flex-item intrinsic nodisplay responsive

用法

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 的宽度为 325 像素，导致高度约为 575 像素。嵌入式 TikTok 视频播放器的默认高度取决于 TikTok 字幕的长度和内容。要显示整个视频，amp-tiktok 组件会调整大小以匹配播放器的高度。您可以通过定义宽度和高度以匹配视频播放器来避免这种情况。

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

在 Playground 中打开此代码片段

如果您选择将宽度设置为大于 325 像素的值，则 iframe 将保持 325 像素，并且将在该空间中水平居中。周围的空间将为空。

如果您选择将高度设置为大于高度的值，则高度将保持 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>

在 Playground 中打开此代码片段

源 URL 示例

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

在 Playground 中打开此代码片段

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

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

请参阅 (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>

在 Playground 中打开此代码片段

辅助功能

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

需要更多帮助？

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

转到 Stack Overflow

发现错误或缺少功能？

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

转到 GitHub