在 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 上編輯範例-