带提示的视频旋转至全屏

简介

这是一个在 AMP 中实现旋转至全屏并带有用户提示的示例模板。

设置

我们 AMP 组件的所有脚本都必须在标头中导入。我们将使用两个组件

amp-video 来渲染视频本身。

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

amp-animation 来描述要触发的动画。

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

样式

设置一些样式以定位提示并定义其外观。

<style amp-custom>
.video-container {
  height: 100%;
  width: 100vw;
  max-width: 700px;
  /* Absolute-positioned children will be positioned relative to this container: */
  position: relative;
  /* Cut off all elements based on container's rectangle: */
  overflow: hidden;
}
#video-hint {
  /* Position relative to its container: */
  position: absolute;
  right: 0;
  bottom: 25%;
  /* Typography: */
  line-height: 1;
  font-size: 13px;
  /* Borders, colors and sizing */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  border-radius: 16px 0 0 16px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 16px;
  /* Position on top of the video: */
  z-index: 100;
  /* Translate-x by 100% to displace out of view: */
  transform: translateX(100%);
  pointer-events: none;
  display: none;
}
/* Display hint only on touch devices */
.amp-mode-touch #video-hint {
  display: block;
}
</style>

添加视频和提示

在视频元素上设置 rotate-to-fullscreen，以便在用户将其设备旋转到横向模式时实际进入全屏模式。

当 firstPlay 事件发生时，amp-video 将触发其 on 属性中描述的动画。当用户开始播放视频时，会立即触发此事件。对于像这样的自动播放视频，当用户点击视频时，将立即触发该事件。

旋转至全屏

您的浏览器不支持 HTML5 视频。

<div class="video-container">
  <div id="video-hint">Rotate for fullscreen</div>
  <amp-video width="480" height="270" src="/static/samples/video/tokyo.mp4" poster="/static/samples/img/tokyo.jpg" layout="responsive" controls on="firstPlay:hint-animation.start" rotate-to-fullscreen autoplay>
    <div fallback>
      <p>Your browser doesn't support HTML5 video.</p>
    </div>
    <source type="video/webm" src="/static/samples/video/tokyo.webm">
  </amp-video>
</div>

定义动画

描述一个动画，该动画将用户提示滑动到视图中，然后将其滑出。

重要的是动画元素具有 hint-animation id，因为这是视频组件用来启动动画的名称。

<amp-animation layout="nodisplay" id="hint-animation">
  <script type="application/json">
  {
    "selector": "#video-hint",
    "duration": "4.5s",
    "delay": "300ms",
    "fill": "both",
    "keyframes": [
      {"offset": 0, "transform": "translateX(100%)"},
      {"offset": 0.15, "transform": "translateX(0)"},
      {"offset": 0.8, "transform": "translateX(0)"},
      {"offset": 1, "transform": "translateX(100%)"}
    ]
  }
  </script>
</amp-animation>

需要进一步解释吗？

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

前往 Stack Overflow

一个无法解释的功能？

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

在 GitHub 上编辑示例

由 @alanorozco 编写