amp-video

简介

使用 amp-video 将视频嵌入到您的 AMP HTML 文件中。视频源文件必须通过 HTTPS 提供。

设置

导入 amp-video 组件。

<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

基本用法

一个带有控制器的简单视频。amp-video 支持以下格式：mp4、webm、ogg 以及 HTML5 视频标签支持的所有格式，包括 HLS。

您的浏览器不支持 HTML5 视频。

<amp-video width="480" height="270" src="/static/samples/video/tokyo.mp4" poster="/static/samples/img/tokyo.jpg" layout="responsive" controls>
  <div fallback>
    <p>Your browser doesn't support HTML5 video.</p>
  </div>
  <source type="video/mp4" src="/static/samples/video/tokyo.mp4">
  <source type="video/webm" src="/static/samples/video/tokyo.webm">
</amp-video>

自动播放

设置 autoplay 将在支持的浏览器上，当视频滚动进入/退出视图时自动播放/暂停视频。

当用户点击视频时，视频在自动播放开始之前会自动静音，视频将被取消静音。

如果用户与视频进行了交互（例如，静音/取消静音、暂停/恢复等），并且视频滚动进出视图，则视频的状态将保持用户离开时的状态。

您的浏览器不支持 HTML5 视频。

<amp-video width="720" height="405" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png" layout="responsive" controls autoplay>
  <div fallback>
    <p>Your browser doesn't support HTML5 video.</p>
  </div>
</amp-video>

HLS 支持

如果浏览器支持，AMP 通过 HLS 支持自适应比特率视频。（请注意，虽然大多数移动浏览器（包括 Chrome 和 Safari）都支持 HLS，但很少有桌面浏览器支持。）

下面的视频已将比特率烧录到视频文件本身中，以便在浏览器在流之间切换时更容易发现。如果您的浏览器不支持 HLS，您将看到“No HLS”。如果您需要以适当的格式创建文件，我们建议您研究 shaka packager。

您的浏览器不支持 HTML5 视频。

<amp-video width="480" height="270" poster="/static/samples/img/tokyo.jpg" layout="responsive" controls autoplay>
  <div fallback>
    <p>Your browser doesn't support HTML5 video.</p>
  </div>
  <source type="application/vnd.apple.mpegurl" src="/static/samples/video/tokyo.m3u8">
  <source type="video/mp4" src="/static/samples/video/tokyo-no-hls.mp4">
</amp-video>

自定义媒体通知

通过在 AMP 上实现 MediaSessionAPI，您现在可以通过 artist、album、artwork 和 title 属性显示描述正在播放的媒体的丰富通知。请按照本教程了解更多信息。

<amp-video autoplay src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png" artwork="img/bigbuckbunny.jpg" title="Big Buck Bunny" album="Blender" artist="Blender Foundation" width="720" height="405" layout="responsive" controls>
</amp-video>

旋转到全屏

如果视频正在手动播放且可见，则设置 rotate-to-fullscreen 会在用户将其设备旋转为横向模式时自动全屏显示视频。

请参阅更高级的示例，了解如何显示用户提示，指示可以旋转设备以进入全屏模式。

旋转以全屏显示

您的浏览器不支持 HTML5 视频。

<amp-video width="720" height="405" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png" layout="responsive" controls rotate-to-fullscreen>
  <div class="video-hint-container" id="video-hint">
    <div class="video-hint">Rotate for fullscreen</div>
  </div>
  <div fallback>
    <p>Your browser doesn't support HTML5 video.</p>
  </div>
</amp-video>

需要进一步解释吗？

如果本页的说明没有涵盖您的所有问题，请随时联系其他 AMP 用户讨论您的具体使用案例。

前往 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的长期参与者，但我们也欢迎您针对您特别感兴趣的问题进行一次性贡献。

在 GitHub 上编辑示例

撰写者： @sebastianbenz