📌  相关文章
📜  Google AMP amp-video-iframe(1)

📅  最后修改于: 2023-12-03 15:01:02.545000             🧑  作者: Mango

Google AMP amp-video-iframe

介绍

Google AMP (Accelerated Mobile Pages) 是一项由 Google 发起的开源项目，旨在加速移动设备上的网页加载速度。ampproject.org 提供了许多丰富的 AMP 组件，其中 amp-video-iframe 组件提供了一种轻量级的嵌入式视频播放方式。

amp-video-iframe 允许开发者使用 iframe 播放视频，并提供了一些基本的控制器和特性，如自动播放、静音、播放倍速等。它还支持优美的操作和事件钩子，如 play、pause、ended 等，使开发者可以在视频播放过程中作出相应的控制和响应。

使用

为了使用 amp-video-iframe 组件，您需要导入 AMP JS 库，并注册 amp-video-iframe 组件。接下来，您可以使用 标签来嵌入视频播放器。

以下是一个示例：

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="https://amp.dev/documentation/components/amp-video-iframe/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>
  </head>
  <body>
    <amp-video-iframe
      width="480"
      height="270"
      layout="responsive"
      autoplay
      loop
      data-videoid="M7lc1UVf-VE"
    >
      <div placeholder>Loading...</div>
    </amp-video-iframe>
  </body>
</html>

解析：

  • 第 8 行和第 9 行，导入 AMP JS 库和 amp-video-iframe 组件
  • 第 15 行，定义 amp-video-iframe 标签，并设置其宽度、高度、响应式布局、自动播放、循环播放和 data-videoid 属性，data-videoid 属性是指嵌入的视频的唯一 ID，可以是 YouTube、Vimeo 等现有的视频平台的 ID。
  • 第 16 行，定义了正在加载视频时显示的占位符
支持的属性

目前，amp-video-iframe 组件支持以下属性：

  • allowfullscreen：是否允许全屏播放视频
  • autoplay：是否自动播放视频
  • controls：是否显示控制器
  • loop：是否循环播放视频
  • muted：是否默认静音
  • poster：指定视频的封面图片
  • title：标题
  • data-videoid：嵌入式视频的唯一 ID
支持的事件钩子

以下是在使用 amp-video-iframe 组件时支持的事件钩子：

  • play：在视频开始播放时触发
  • pause：在暂停视频时触发
  • ended：在视频结束时触发
结论

amp-video-iframe 组件为移动设备上的网页视频播放提供了一种简单、轻量级的解决方案。您可以使用它来嵌入 YouTube、Vimeo 等网站的视频，并进行自定义的视频播放控制和响应。