使用 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 视频组件都使用 width 和 height 属性指定宽高比，而响应式布局负责填充轮播。某些视频组件默认情况下未在轮播中居中，我们使用 CSS flex 布局来解决此问题。

您的浏览器不支持 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