在 AMP 中整合影片概觀
- 簡介設定使用 amp-video 嵌入您自己的影片支援的影片平台 amp-brightcove amp-dailymotion amp-facebook amp-instagram amp-twitter amp-vimeo amp-vine amp-youtube 如果您的影片供應商不受支援？

網站

在 AMP 中整合影片概觀

簡介

在 AMP HTML 檔案中整合影片的方式有很多種。以下列出目前所有支援的影片格式和平台。

設定

匯入程式庫。我們使用了幾個必須匯入的範例。我們先從 amp-instagram 開始

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

為 vine 範例匯入 amp-vine。

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

為 youtube 範例匯入 amp-youtube。

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

為 vimeo 範例匯入 amp-vimeo。

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

為 dailymotion 範例匯入 amp-dailymotion。

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

為 twitter 範例匯入 amp-twitter。

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

為 facebook 範例匯入 amp-facebook。

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

為 brightcove 範例匯入 amp-brightcove。

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

為 iframe 範例匯入 amp-iframe。

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

為 video 範例匯入 amp-video。

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

使用 amp-video 嵌入您自己的影片

針對託管影片使用 amp-video。在此處尋找更多範例：這裡。

您的瀏覽器不支援 HTML5 影片。

<amp-video width="480" height="270" src="/static/samples/video/tokyo.mp4" poster="/static/samples/img/tokyo.jpg" layout="responsive" controls>
  <div fallback>
    <p>Your browser doesn't support HTML5 video.</p>
  </div>
  <source type="video/mp4" src="/static/samples/video/tokyo.mp4">
  <source type="video/webm" src="/static/samples/video/tokyo.webm">
</amp-video>

支援的影片平台

amp-brightcove

針對 Brightcove 影片使用 amp-brightcove。在此處尋找更多範例：這裡。

<amp-brightcove data-account="906043040001" data-video-id="1401169490001" data-player-id="180a5658-8be8-4f33-8eba-d562ab41b40c" layout="responsive" width="480" height="270">
</amp-brightcove>

amp-dailymotion

針對 dailymotion 影片使用 amp-dailymotion。在此處尋找更多範例：這裡。

<amp-dailymotion data-videoid="x3rdtfy" layout="responsive" data-ui-highlight="FF4081" width="480" height="270">
</amp-dailymotion>

amp-facebook

針對 Facebook 影片使用 amp-facebook。在此處尋找更多範例：這裡。

<amp-facebook width="552" height="310" layout="responsive" data-embed-as="video" data-href="https://#/zuck/videos/10102509264909801/">
</amp-facebook>

amp-instagram

針對 Instagram 上的影片使用 amp-instagram。在此處尋找更多範例：這裡。

<amp-instagram data-shortcode="1totVhIFXl" width="1" height="1" layout="responsive">
</amp-instagram>

amp-twitter

針對 Twitter 影片使用 amp-twitter。在此處尋找更多範例：這裡。

<amp-twitter width="375" height="472" layout="responsive" data-tweetid="707569406105092096">
</amp-twitter>

amp-vimeo

針對 Vimeo 影片使用 amp-vimeo。在此處尋找更多範例：這裡。

<amp-vimeo data-videoid="27246366" layout="responsive" width="16" height="9">
</amp-vimeo>

amp-vine

針對 Vine 嵌入內容使用 amp-vine。在此處尋找更多範例：這裡。

<amp-vine width="400" height="400" layout="responsive" data-vineid="bpxmJaHED09">
</amp-vine>

amp-youtube

針對 YouTube 影片使用 amp-youtube。在此處尋找更多範例：這裡。

<amp-youtube width="480" height="270" layout="responsive" data-videoid="lBTCB7yLs8Y">
</amp-youtube>

如果您的影片供應商不受支援？

針對 AMP 中不支援的影片使用 amp-video-iframe。在此處尋找更多範例：這裡。

<amp-video-iframe id="myVideo" src="/static/samples/files/custom-video-player.html" width="317" height="210" layout="responsive" autoplay>
             <amp-img placeholder src="/static/samples/img/bird.jpg" layout="fill">
             </amp-img>
</amp-video-iframe>

需要進一步說明嗎？

如果本頁面的說明沒有涵蓋您的所有疑問，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

有未說明的特色功能？

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

在 GitHub 上編輯範例

作者： @kul3r4