適用於 amp-video 的點擊播放重疊廣告

在 Playground 中開啟

簡介

點擊播放是網頁影片播放器的常見使用者體驗功能。

重疊廣告最初顯示在影片上方，其中包含影片的詳細資訊，例如標題、時間長度、海報圖片、連結和播放圖示。

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.dev.org.tw/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