Advanced Video Docking

Experimental

해당 예제는 다음의 실험적 기능을 활용했습니다: video-dock. 아래 버튼으로 실험을 활성화할 수 있습니다. 일부 컴포넌트의 경우 AMP 개발자 채널도 함께 활성화되어야 합니다. Learn more about experimental features.

Enable Experiment
AMP Version
PROD BETA

데모 보기 Playground에서 열기

Introduction

With amp-video you can have rich user interface features, such as docking (minimize-to-corner).

You can simply enable this feature on your <amp-video> by using the dock attribute. This example goes further by specifying a "docking slot" (a DOM element that represents the area where the video should be minimized) and layout synchronization using events and actions, and the amp-animation extension.

Setup

Include the amp-video extension.

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

Include the amp-video-docking extension.

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

Include the amp-animation extension to animate the <aside> element on dock and undock.

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

Include styling

<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>

Define animations

To slide down the content below the docking slot, the vertical offset is changed into a 20px positive offset to create padding below the slot.

<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>

To slide up the content once the video is no longer docked, the animation reverts the aside content's offset to -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>

Include your video

In your <amp-video> tag, you should include the dock attribute to specify that the video should be minimized to corner on scroll. By setting a value on the attribute, we're specifying which docking slot we're using via a CSS selector.

<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>

Include the docking slot.

Set width and height to 16:9. Since its layout is responsive, the slot will expand to fill the aside's width while preserving aspect ratio.

You should also set the on attribute to specify the actions that get executed on docking events. In this case, we'll start the slideDown animation on dock and the slideUp animation on undock.

Note that we're seeting the action on the slot element. If we were to set it in the video itself, it would be triggered for minimize-to-corner rather than minimize-to-slot.

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

Define the content under the slot

This container is negatively offset on the vertical axis to cover the docking slot. Our slideDown animation will take care of translating this content to make room for the docking slot.

<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에서 샘플 수정하기

Written by @alanorozco