影片廣告
- 摘要樣式啟動畫面層影片層

影片廣告

摘要

使用 amp-video 的 AMPHTML 廣告範例，以顯示具有圖層和播放控制功能的影片廣告。

樣式

這是一個進階範例，需要一些樣式才能使其外觀和功能正常運作。此處設計的樣式具有回應性，適用於各種廣告尺寸。

<style amp-custom>
#splash-container, #video-container {
  /* Set to ad dimensions */
  width: 300px;
  height: 168px;

  /* Set so children can position themselves in relation to the container */
  position: relative;

  /* Basic font styles */
  font-family: sans-serif;
  line-height: 1;
  color: #fff;
}
.main-link {
  display: block;
  color: white;
}
.brand {
  /* Place in top-left corner */
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
}
.watch-video {
  /* Position roughly in vertical center */
  position: absolute;
  z-index: 1;
  top: 70px;
  left: 10px;

  /* Button styles */
  padding: 7px;
  border: gray solid 1px;
  border-radius: 7px;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}
.title {
  /* Place beneath "Watch Video" button */
  position: absolute;
  z-index: 1;
  top: 110px;
  left: 10px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);

  /* Font styles */
  font-weight: bold;
  font-size: 18px;
}
.close {
  /* Place in top-right corner */
  position: absolute;
  z-index: 1;
  right: 10px;
  top: 10px;

  /* Button styles */
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
}
#pause, #play {
  /* Place in bottom-right corner */
  position: absolute;
  z-index: 1;
  right: 10px;
  bottom: 10px;

  /* Button styles */
  border: 1px solid grey;
  vertical-align: center;
  text-align: center;
  background-color: rgba(0,0,0, 0.8);
  cursor: pointer;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
</style>

啟動畫面層

建立必要的標記，以顯示代表兩種廣告狀態的兩個圖層。

首先，我們需要一個 <div>，其中包含靜態圖片、文字和一個用於開啟影片層的按鈕。

這些按鈕包含回應 tap 事件的動作處理常式。點擊「觀看影片」按鈕後，啟動畫面層將隱藏，影片層將顯示，並且影片將播放。

請注意，啟動畫面層將在此頁面上摺疊，但是當單獨預覽範例時，這些圖層將佔據相同的位置。

Best Hotels Corp 從我們的豪華飯店客房系列欣賞迷人景色。

觀看影片

<div id="splash-container">
  <a href="https://amp.dev.org.tw/documentation/examples/multimedia-animations/video_ad/"
    target="_blank"
    class="main-link">
    <span class="brand">
      Best Hotels Corp
    </span>
    <span class="title">
      Amazing views from our collection of luxury hotel rooms.
    </span>
    <amp-img src="/static/samples/img/tokyo.jpg"
      width="300"
      height="168">
    </amp-img>
  </a>
  <div role="button"
    class="watch-video"
    on="tap:splash-container.hide,
            video-container.show,
            my-video.play,
            play.hide,
            pause.show">
    Watch Video
  </div>
</div>

影片層

一個 <div>，其中包含影片和用於播放/暫停和關閉影片層的按鈕。

影片是使用 amp-video 元件嵌入的，可以使用 play 和 pause 動作來控制。

請注意播放和暫停按鈕是如何根據播放動作隱藏和顯示的兩個不同元素。

<div id="video-container"
     hidden>
  <amp-video id="my-video"
    layout="fixed-height"
    height="168"
    src="/static/samples/video/tokyo.mp4"
    loop>
  </amp-video>
  <div role="button"
    class="close"
    on="tap:video-container.hide,
            splash-container.show,
            my-video.pause">
    ×
  </div>
  <div role="button"
    id="pause"
    on="tap:my-video.pause,
            play.show,
            pause.hide">
    ||
  </div>
  <div role="button"
    id="play"
    on="tap:my-video.play,
            play.hide,
            pause.show">
    ▶
  </div>
</div>

需要進一步說明嗎？

如果此頁面上的說明未能涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

有未說明的功能嗎？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎針對您特別熱衷的問題提出一次性貢獻。

在 GitHub 上編輯範例

作者： @sebastianbenz