amp-video 的点击播放叠加层

在 Playground 中打开

简介

点击播放是 Web 上视频播放器常见的用户体验功能。

叠加层最初显示在视频顶部，包含有关视频的详细信息，例如标题、时长、海报图像、链接和播放图标。

amp-video 支持标准的 play AMP 操作，允许您轻松实现点击播放。

设置

导入 amp-video 组件。

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

样式

点击播放叠加层的自定义样式

<style amp-custom>

  /* Wrapper that hosts the video and the overlay */
  .video-player {
    position: relative;
    overflow: hidden;
  }

  /* Overlay fills the parent and sits on top of the video */
  .click-to-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .poster-image {
    position: absolute;
    z-index: 1;
  }

  .poster-image img {
    object-fit: cover;
  }

  .video-title {
    position: absolute;
    z-index: 2;

    /* Align to the top left */
    top: 0;
    left: 0;

    font-size: 1.3em;
    background-color: rgba(0,0,0,0.8);
    color: #fafafa;
    padding: 0.5rem;
    margin: 0px;
  }

  .play-icon {
    position: absolute;
    z-index: 2;

    width: 100px;
    height: 100px;

    background-image: url(https://amp.org.cn/static/samples/img/play-icon.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    /* Align to the middle */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    cursor: pointer;
    opacity: 0.9;
  }

  .play-icon:hover, .play-icon:focus {
    opacity: 1;
  }
</style>

标记

叠加层是一个绝对定位的 div，位于 amp-video 元素的顶部并填充父播放器容器。它包含海报图像、视频标题和播放图标。

播放图标使用 play 和 hide AMP 操作来隐藏叠加层并在点击时播放视频。

视频标题

<div class="video-player">

  <amp-video id="myVideo" controls width="1280" height="720" layout="responsive" src="/static/samples/video/bullfinch.mp4">
  </amp-video>

  <div id="myOverlay" class="click-to-play-overlay">

    <h3 class="video-title">Title of the video</h3>

    <div class="play-icon" role="button" tabindex="0" on="tap:myOverlay.hide, myVideo.play"></div>

    <amp-img class="poster-image" layout="fill" src="/static/samples/img/bullfinch_poster.jpg"></amp-img>
  </div>
</div>

需要进一步解释吗？

如果本页的解释没有涵盖您所有的问题，请随时与其他 AMP 用户联系，讨论您的确切用例。

转到 Stack Overflow

一个未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例

由 @aghassemi 编写