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

影片廣告

摘要

使用 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>，其中包含靜態圖片、文字和一個用於開啟影片圖層的按鈕。

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

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

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 元件嵌入的，可以使用播放和暫停動作來控制。

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

<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