高级视频停靠

实验性

此示例使用以下实验性功能：video-dock。通过下面的按钮启用该实验。某些组件还需要启用 AMP Beta 通道。了解更多关于实验性功能的信息。

启用实验
AMP 版本
PROD BETA

查看演示在 Playground 中打开

简介

使用 amp-video，您可以拥有丰富的用户界面功能，例如停靠（最小化到角落）。

您只需在 <amp-video> 上使用 dock 属性即可启用此功能。此示例通过指定“停靠槽”（表示视频应最小化的区域的 DOM 元素）以及使用事件和动作和 amp-animation 扩展实现布局同步来进一步扩展。

设置

包含 amp-video 扩展。

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

包含 amp-video-docking 扩展。

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

包含 amp-animation 扩展，以在 dock 和 undock 时为 <aside> 元素设置动画。

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

包含样式

<style amp-custom>
  body {
    margin: 0;
    background: white;
    font-family: sans-serif;
  }

  header {
    background: white;
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    line-height: 40px;
    font-size: 18px;
  }

  main {
    margin: 0 auto;
    padding: 80px 0 0 0;
    width: 100vw;
  }

  .content {
    height: 200vh;
    width: calc(70vw - 20px);
    padding: 0 20px;
    box-sizing: border-box;
  }

  aside {
    right: 20px;
    margin-left: 70vw;
    position: fixed;
    top: 80px;

    /*
    Define a viewport-based width for the aside. The docking slot will expand
    to fill its width.
    */
    width: 30vw;
  }

  .more-content {
    padding: 20px 20px 0;
    background: #eaeaea;

    /*
    Offset vertical axis by the negative height of the docking slot.
    Since the docking slot is 30vw wide, its height is 16.85vw based on a 16:9
    aspect ratio
    */
    transform: translateY(-16.85vw);
  }

  .more-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .more-content li {
    display: block;
    margin: 0 -20px;
  }

  .more-content li a {
    display: block;
    border-top: 1px solid #ddd;
    text-decoration: none;
    padding: 16px 20px;
    color: #2ac;
  }

  h3 {
    margin: 0;
    padding-bottom: 20px;
  }

  /* This is only needed for the preview to work on AMP by Example. You don't
  need to include these set of properties. */
  #abe-preview > div {
    width: 100vw;
    max-width: 100vw;
  }

  /* Ditto. */
  .abe-experiment-warning {
    max-width: calc(70vw - 60px);
  }

  @media (max-width: 600px) {
    /* Hide on smaller devices to fallback to standard docking. */
    #dock-slot {
      display: none;
    }

    /* Reset fixed items. */
    aside,
    header {
      position: static;
    }

    aside {
      margin-left: 0;
      width: 100%;
    }

    .content {
      width: 100vw;
    }

    main {
      padding-top: 20px;
    }
  }
</style>

定义动画

要将停靠槽下方的内容向下滑动，垂直偏移会更改为 20px 的正偏移，以在槽下方创建填充。

<amp-animation layout="nodisplay" id="slideDown">
  <script type="application/json">
    {
      "selector": ".more-content",
      "duration": "0.5s",
      "fill": "both",
      "easing": "ease-out",
      "keyframes": [{
          "offset": 0,
          "transform": "translateY(-16.85vw)"
        },
        {
          "offset": 1,
          "transform": "translateY(20px)"
        }
      ]
    }
  </script>
</amp-animation>

要在视频不再停靠时向上滑动内容，动画会将 aside 内容的偏移恢复为 -16.85vw。

<amp-animation layout="nodisplay" id="slideUp">
  <script type="application/json">
    {
      "selector": ".more-content",
      "duration": "0.5s",
      "fill": "both",
      "easing": "ease-out",
      "keyframes": [{
          "offset": 0,
          "transform": "translateY(20px)"
        },
        {
          "offset": 1,
          "transform": "translateY(-16.85vw)"
        }
      ]
    }
  </script>
</amp-animation>

包含您的视频

在您的 <amp-video> 标签中，您应包含 dock 属性以指定视频应在滚动时最小化到角落。通过在属性上设置值，我们通过 CSS 选择器指定我们正在使用哪个停靠槽。

<amp-video
  src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
  poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png"
  artwork="img/bigbuckbunny.jpg"
  title="Big Buck Bunny"
  album="Blender"
  artist="Blender Foundation"
  width="720"
  height="405"
  layout="responsive"
  controls
  dock="#dock-slot">
</amp-video>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis odio vitae sem ornare laoreet. Mauris
  sodales convallis eros, non imperdiet mauris ullamcorper eget. Aenean tempus augue eu nisl consectetur
  sagittis. Morbi vel nunc eu leo tristique vehicula. Sed finibus velit luctus, scelerisque mauris luctus,
  tristique justo. Pellentesque non mauris aliquam, mattis dui in, gravida lorem. Suspendisse consectetur dui
  quis quam fringilla pulvinar. Nunc sit amet leo porta, tincidunt dui quis, tempus nisl. Suspendisse aliquet,
  velit ac tincidunt finibus, massa mauris scelerisque dolor, sit amet varius mi felis non ante. Ut imperdiet
  auctor diam id ultricies. Phasellus fermentum ligula at luctus sodales. Nulla semper felis at tempus sagittis.
  Curabitur ac risus non turpis sagittis lobortis ut non tortor. Nunc id tempus nisi.</p>
<p>Vestibulum sit amet posuere sapien. Fusce ac eleifend sapien. Morbi ut vulputate eros, non ornare erat.
  Pellentesque quis mi tempor, venenatis sapien non, eleifend ligula. Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Aliquam vehicula sem eu massa sollicitudin, quis condimentum risus fermentum. Nunc scelerisque
  posuere nisl ut tempus. Fusce blandit quis tortor nec facilisis.</p>
<p>Mauris sed neque at erat tristique gravida. Suspendisse pretium rhoncus ante id efficitur. Praesent ligula
  purus, mollis sit amet metus non, pulvinar iaculis eros. Integer et nisi rhoncus, aliquet eros non, malesuada
  urna. Nunc tincidunt felis sed molestie ornare. Vivamus est magna, rutrum sit amet erat et, porttitor aliquam
  elit. Aenean condimentum urna nec urna dapibus, ultricies iaculis nisl porttitor. Sed vitae turpis est. Ut
  purus nibh, suscipit a est ut, ullamcorper aliquet velit. Nam egestas urna nec tortor laoreet, eu molestie
  lectus mattis. Pellentesque ut orci dignissim, molestie augue sed, venenatis diam. Curabitur congue metus
  euismod, pretium ligula sit amet, blandit orci. Nulla vel pretium urna. Nullam suscipit nisi eget semper
  pulvinar.</p>
<p>Proin non rutrum ipsum. Duis a vestibulum velit, non tincidunt sapien. Orci varius natoque penatibus et magnis
  dis parturient montes, nascetur ridiculus mus. Donec condimentum malesuada sapien ut aliquet. Donec eleifend
  metus dui, vel dignissim dolor blandit ac. Quisque nunc erat, egestas nec arcu ac, molestie lobortis mauris.
  Maecenas non sapien eleifend, efficitur elit quis, mollis augue. Nunc euismod consectetur orci, sed scelerisque
  massa facilisis a.</p>
<p>Curabitur laoreet in metus fermentum pretium. Nunc pretium iaculis scelerisque. Suspendisse at porttitor odio.
  Sed consequat imperdiet ligula vitae rhoncus. Nullam sagittis dui diam, sit amet convallis augue vestibulum in.
  Etiam in vestibulum eros. Phasellus semper mattis aliquet. Donec ac massa eget felis suscipit rhoncus a sed
  metus. Quisque pharetra feugiat dui, at tempor erat volutpat vel. Donec quam ipsum, suscipit quis nisi eu,
  tincidunt cursus libero. Integer sed pulvinar elit. Suspendisse ex nisi, egestas ac ante fringilla, convallis
  tempor ipsum. Quisque est odio, gravida ac malesuada vitae, scelerisque vel quam.</p>
</div>
<aside>

包含停靠槽。

将宽度和高度设置为 16:9。由于其布局为 responsive，因此该槽将扩展以填充 aside 的宽度，同时保持纵横比。

您还应设置 on 属性以指定在停靠事件时执行的动作。在这种情况下，我们将在 dock 时启动 slideDown 动画，并在 undock 时启动 slideUp 动画。

请注意，我们正在槽元素上设置动作。如果我们在视频本身中设置它，则会触发 minimize-to-corner 而不是 minimize-to-slot。

<amp-layout
    layout="responsive"
    width="16"
    height="9"
    on="dock: slideDown.start; undock: slideUp.start"
    id="dock-slot">
</amp-layout>

定义停靠槽下的内容

此容器在垂直轴上负偏移，以覆盖停靠槽。我们的 slideDown 动画将负责转换此内容，为停靠槽腾出空间。

<div class="more-content">
  <h3>More Content</h3>
  <ul>
    <li><a href="#">Was it an alien or something?! Click here to find out!</a></li>
    <li><a href="#">Baby ducks see water for the first time - Can you BELIEVE what they do?</a></li>
    <li><a href="#">Grocery stores HATE him: save up to 90% with this one weird trick.</a></li>
    <li><a href="#">When you read these 99 shocking food facts, you'll never want to eat again.</a></li>
    <li><a href="#">Scientists say giant asteroid could hit Earth next week, causing mass devastation.</a></li>
  </ul>
</div>

需要进一步解释？

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

转到 Stack Overflow

未解释的功能？

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

在 GitHub 上编辑示例

撰写者： @alanorozco