amp-youtube

实验性

Bento

描述

显示 YouTube 视频。

必需脚本

AMP Bento（独立）

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

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-1.0.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-youtube-1.0.css">

支持的布局

填充固定固定高度 flex-item nodisplay 响应式

示例

amp-addthis amp-youtube 产品页面 AMP 中的视频整合概述使用 amp-carousel 制作视频轮播

用法

显示 YouTube 视频。

使用响应式布局，示例中的宽度和高度应为 16:9 宽高比视频提供正确的布局

<amp-youtube
  data-videoid="mGENRKrdoGY"
  layout="responsive"
  width="480"
  height="270"
></amp-youtube>

<amp-youtube
  id="myLiveChannel"
  data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
  width="358"
  height="204"
  layout="responsive"
>
  <amp-img
    src="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg"
    placeholder
    layout="fill"
  />
</amp-youtube>

在有效的 AMP 文档之外独立使用

Bento AMP 允许你在非 AMP 页面中使用 AMP 组件，而无需完全提交到有效的 AMP。你可以获取这些组件，并将它们放置在不支持 AMP 的框架和 CMS 中的实现中。在我们的指南中阅读更多信息在非 AMP 页面中使用 AMP 组件。

<head>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-youtube-1.0.css">
  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-1.0.js"></script>
</head>
<body>
  <amp-youtube
    style="aspect-ratio: 16/9"
    id="my-youtube-video"
    data-videoid="mGENRKrdoGY"
  ></amp-youtube>
  <script>
    (async () => {
      const video = document.querySelector('#my-youtube-video');
      await customElements.whenDefined('amp-youtube');
      const videoHandle = await video.getApi();

      // programatically call playback actions
      videoHandle.play();
      videoHandle.pause();
      videoHandle.requestFullscreen();
      videoHandle.mute();
      videoHandle.unmute();

      // get video state
      console.log({
        autoplay: videoHandle.autoplay,
        controls: videoHandle.controls,
        duration: videoHandle.duration,
        currentTime: videoHandle.currentTime,
        loop: videoHandle.loop,
      })
    })();
  </script>
</body>

交互性和 API 用法

Bento 通过其 API 具有高度交互性。在 Bento 独立使用中，元素的 API 替换了 AMP 操作和事件以及 amp-bind。

可以通过在文档中包含以下脚本标签来访问 amp-youtube 组件 API

await customElements.whenDefined('amp-youtube');
const videoHandle = await video.getApi();

操作

amp-youtube API 允许你执行以下操作

`play()`

播放视频。

videoHandle.play();

`pause()`

暂停视频。

videoHandle.pause();

`mute()`

静音视频。

videoHandle.mute();

`unmute()`

取消静音视频。

videoHandle.unmute();

`requestFullscreen()`

尽可能将视频扩展到全屏。

videoHandle.requestFullscreen();

属性

它还公开了以下只读属性

`currentTime` (`number`)

当前播放时间（以秒为单位）。

console.log(videoHandle.currentTime);

`duration` (`number`)

视频的持续时间（以秒为单位），如果已知（例如，不是直播）。

console.log(videoHandle.duration);

`autoplay` (`boolean`)

视频是否自动播放。

console.log(videoHandle.autoplay);

`controls` (`boolean`)

视频是否显示控件。

console.log(videoHandle.controls);

`loop` (`boolean`)

视频是否循环播放。

console.log(videoHandle.loop);

从 0.1 迁移

amp-youtube 的实验性 1.0 版本不会自动将 data-param-controls 转换为 controls。相反，它直接将 controls 作为属性获取。

属性

autoplay

如果存在此属性，并且浏览器支持自动播放

视频在自动播放开始前自动静音
当视频滚动到视图之外时，视频暂停
当视频滚动到可视区域时，视频恢复播放
当用户点击视频时，视频取消静音
如果用户与视频进行了交互（例如，静音/取消静音、暂停/恢复等），并且视频滚动到可视区域内或外，视频的状态将保持用户离开时的状态。例如，如果用户暂停视频，然后将视频滚动到可视区域外，再返回到视频，则视频仍处于暂停状态。

loop

如果存在此属性，视频或播放列表将在结束时再次播放（从头开始）。

data-videoid

在每个 YouTube 视频页面 URL 中找到的 YouTube 视频 ID。

例如，在此 URL 中：https://www.youtube.com/watch?v=Z1q71gFeRqM，Z1q71gFeRqM 是视频 ID。

data-live-channelid

提供稳定的直播 URL 的 YouTube 频道 ID。例如，在此 URL 中：https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q，UCB8Kb4pxYzsDsHxzBfnid4Q 是频道 ID。你可以提供 data-live-channelid 而不是 data-videoid 属性，以嵌入直播的稳定 URL，而不是视频。频道没有默认占位符。你可以为视频提供占位符，如上例 2 所示。

data-param-*

所有 data-param-* 属性（data-param-autoplay 和 data-param-loop 除外）将作为查询参数添加到 YouTube iframe src。这可用于将自定义值传递给 YouTube 插件，例如是否显示控件。

键和值将经过 URI 编码。键将采用驼峰式大小写

controls

请参阅 YouTube 嵌入式播放器参数，了解 YouTube 的更多参数选项。

使用 autoplay 属性代替 data-param-autoplay，使用 loop 属性代替 data-param-loop，因为自动播放和循环播放行为均由 AMP 在内部处理，而不是由 YouTube 播放器处理。

credentials（可选）

定义由 Fetch API 指定的 credentials 选项。

支持的值：omit、include
默认值：include

如果你想在隐私增强模式下使用 YouTube 播放器，请传递 omit 的值。

通常，YouTube 在加载播放器时设置其 cookie。在隐私增强模式下，当用户点击播放器时设置 cookie。

title（可选）

为组件定义一个 title 属性，以传播到底层的 <iframe> 元素。默认值为 "YouTube 视频"。

通用属性

此元素包括扩展到 AMP 组件的通用属性。

需要更多帮助？

你已经阅读过本文档很多遍了，但它并没有真正涵盖你所有的问题？也许其他人也有同样的感觉：在 Stack Overflow 上联系他们。

转到 Stack Overflow

发现错误或缺少功能？

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

前往 GitHub

amp-youtube 1.0 0.1

描述