视频广告
- 摘要样式启动层视频层

视频广告

摘要

使用 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 事件的操作处理程序。点击“观看视频”按钮后，启动层将隐藏，视频层将显示，视频将播放。

请注意，启动层将在此页面上折叠，但是当单独预览该示例时，这些图层将占据相同的位置。

最佳酒店公司从我们的豪华酒店客房系列欣赏美景。

观看视频

<div id="splash-container">
  <a href="https://amp.org.cn/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 编写