進階影片停靠

實驗性功能

此範例使用以下實驗性功能：video-dock。透過下方按鈕啟用實驗性功能。部分元件也需要啟用 AMP Beta Channel。深入瞭解實驗性功能。

啟用實驗性功能
AMP 版本
正式版 Beta 版

簡介

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

為了在影片不再停靠時向上滑動內容，動畫會將側邊內容的偏移還原為 -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，因此插槽會展開以填滿側邊的寬度，同時保留外觀比例。

您也應設定 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