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 video 标签支持的所有格式（包括 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