搭配 amp-carousel 的影片輪播

簡介

amp-carousel 元件不僅適用於圖片庫，也適用於影片庫。實作影片庫時的挑戰在於確保所有影片都符合輪播的尺寸。這個範例示範如何使用許多可用的 AMP 影片整合功能來實作大型影片輪播。

設定

匯入所有 AMP 影片元件。首先是 amp-carousel。

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

若要匯入 Instagram 影片，請匯入 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>

若要匯入 Brid-Player 影片，請匯入 amp-brid-player 元件。

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

若要匯入 Reach-Player 影片，請匯入 amp-reach-player 元件。

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

若要匯入 Springboard-Player 影片，請匯入 amp-springboard-player 元件。

<script async custom-element="amp-springboard-player" src="https://cdn.ampproject.org/v0/amp-springboard-player-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>

若要匯入自訂影片，請匯入 amp-video 元件。

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

影片輪播

以投影片形式顯示影片清單。如需 amp-carousel 的詳細資訊，請參閱此處。每個 AMP 影片元件都會使用寬度和高度屬性指定長寬比，而回應式版面配置會負責填滿輪播。部分影片元件預設不會在輪播中置中，我們使用 CSS Flexbox 版面配置來修正這個問題。

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

<amp-carousel width="450" height="450" layout="responsive" type="slides">
  <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>
  </amp-video>
  <amp-brid-player data-partner="264" data-player="4144" data-video="13663" layout="responsive" width="480" height="270"></amp-brid-player>
  <amp-brightcove data-account="906043040001" data-video-id="1401169490001" data-player-id="180a5658-8be8-4f33-8eba-d562ab41b40c" layout="responsive" width="400" height="300">
  </amp-brightcove>
  <amp-dailymotion data-videoid="x3rdtfy" layout="responsive" data-ui-highlight="FF4081" width="480" height="270"></amp-dailymotion>
  <div>
    <div class="amp-video-container">
      <amp-facebook class="amp-video" width="552" height="574" layout="responsive" data-embed-as="video" data-href="https://#/zuck/videos/10102509264909801/">
      </amp-facebook>
    </div>
  </div>
  <amp-instagram data-shortcode="BCtYW7mhRV8" width="1" height="1" layout="responsive"></amp-instagram>
  <div>
    <div class="amp-video-container">
      <amp-reach-player class="amp-video" data-embed-id="default" layout="responsive" width="560" height="315"></amp-reach-player>
    </div>
  </div>
  <amp-springboard-player data-site-id="261" data-mode="video" data-content-id="1578473" data-player-id="test401" data-domain="test.com" data-items="10" layout="responsive" width="480" height="270">
  </amp-springboard-player>
  <amp-twitter width="375" height="472" layout="responsive" data-tweetid="707569406105092096"></amp-twitter>
  <amp-vimeo data-videoid="27246366" width="500" height="281"></amp-vimeo>
  <amp-vine width="400" height="300" layout="responsive" data-vineid="bpxmJaHED09"></amp-vine>
  <amp-youtube height="270" layout="fixed-height" data-videoid="SOx1XfOjJPI"></amp-youtube>
  <amp-iframe title="Video of Sintel, an independently produced short film" width="400" height="300" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" allowfullscreen frameborder="0" src="https://player.ooyala.com/iframe.html?ec=Vxc2k0MDE6Y_C7J5podo3UDxlFxGaZrQ&pbid=6440813504804d76ba35c8c787a4b33c&platform=html5">
  </amp-iframe>
</amp-carousel>

需要進一步說明嗎？

如果這個頁面上的說明沒有解答您的所有疑問，歡迎您聯絡其他 AMP 使用者，討論您的確切使用案例。

前往 Stack Overflow

有未說明的特色功能嗎？

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

在 GitHub 上編輯範例

作者： @kul3r4