重要事項：本文件不適用於您目前選取的格式快訊！

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 屬性指向圖片網址
將 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 的標題將會以 'Tiktok: "標題"' 格式用作 aria-label。否則，aria-label 將預設為 'TikTok'。

需要更多協助嗎？

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

前往 Stack Overflow

發現錯誤或缺少功能？

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

前往 GitHub