重要事項：此文件不適用於您目前選取的格式 電子郵件！

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 的寬度為 325px，導致高度約為 575px。嵌入式 TikTok 影片播放器的預設高度取決於 TikTok 標題的長度和內容。為了顯示完整影片，amp-tiktok 元件會調整大小以符合播放器高度。您可以透過定義符合影片播放器的寬度和高度來避免這種情況。

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

在 Playground 中開啟此程式碼片段

如果您選擇將寬度設定為大於 325px 的值，則 iframe 將保持 325px，並在該空間中水平置中。周圍的空間將會是空的。

如果您選擇將高度設定為大於 iframe 高度的值，則高度將保持 iframe 的高度。

預留位置

有兩種方式可以設定預留位置圖片

將 data-src 屬性指向圖片網址
將 TikTok 提供的 cite 屬性 (透過 blockquote 提供) 指向圖片網址。

屬性

`data-src`

data-src 屬性可以包含兩個值之一：影片 ID 或 TikTok 詳細頁面的完整網址。

影片 ID 範例

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

在 Playground 中開啟此程式碼片段

來源網址範例

<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」指令道歉。
♬ original sound - 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 來源網址作為 data-src，則 TikTok 的標題將會用作 aria-label，格式為「Tiktok: "標題"」。否則，aria-label 將預設為「TikTok」。

需要更多協助嗎？

您已閱讀此文件十幾次，但它仍然沒有涵蓋您的所有問題？也許其他人也有相同的感受：請在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow

發現錯誤或缺少功能？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別熱衷的問題提供一次性的貢獻。

前往 GitHub