amp-tiktok

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

用法

`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>

如果您選擇將寬度設定為大於 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>

來源 URL 範例

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

除了 `data-src` 屬性之外，`amp-tiktok` 也允許使用 TikTok 產生的嵌入程式碼來顯示。

若要使用此方法，請複製 TikTok 嵌入程式碼中的 blockquote

1. 請參閱 (TikTok 嵌入文件)[https://developers.tiktok.com/doc/Embed] 以尋找您的 TikTok 的嵌入程式碼。
2. 複製嵌入程式碼，並將其新增為 `amp-tiktok` 元素的子元素。
3. 將 `placeholder` 屬性新增至 `blockquote`。
4. 從 `blockquote` 移除 `style` 屬性。

<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'。