Bento Youtube

嵌入 Youtube 视频。

将 bento-youtube 用作 web 组件或 React 函数组件

Web 组件

你必须包含每个 Bento 组件所需的 CSS 库，以保证正确加载，并在添加自定义样式之前。或者使用可内嵌的轻量级预升级样式。请参阅布局和样式。

通过 npm 导入

npm install @bentoproject/youtube

import {defineElement as defineBentoYoutube} from '@bentoproject/youtube';
defineBentoYoutube();

通过 `<script>` 包含

<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-youtube-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-youtube-1.0.css" crossorigin="anonymous">

示例

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-youtube-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-youtube-1.0.css"
    />
    <style>
      bento-youtube {
        width: 320px;
        height: 180px;
      }
    </style>

</head>

<body>

<bento-youtube data-videoid="dQw4w9WgXcQ"></bento-youtube>

</body>

布局和样式

每个 Bento 组件都有一个小型的 CSS 库，你必须包含它以保证正确加载，而不会出现内容偏移。由于基于顺序的特异性，你必须手动确保在任何自定义样式之前包含样式表。

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.ampproject.org/v0/bento-youtube-1.0.css"
/>

或者，你也可以使轻量级的预升级样式内嵌可用

<style>
  bento-youtube {
    display: block;
    overflow: hidden;
    position: relative;
  }
</style>

容器类型

bento-youtube 组件具有已定义的布局大小类型。为了确保组件正确渲染，请务必通过所需的 CSS 布局（例如使用 height、width、aspect-ratio 或其他此类属性定义的布局）将大小应用于组件及其直接子级（幻灯片）。

bento-youtube {
  height: 100px;
  width: 100%;
}

属性

autoplay

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

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

循环

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

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 编码。键将采用驼峰式大小写。

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

凭据（可选）

定义 credentials 选项，如 Fetch API（omit 或 include）所指定。

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

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

标题（可选）

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

交互性和 API 使用

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

await customElements.whenDefined('bento-youtube');
const api = await video.getApi();

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-youtube-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-youtube-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-youtube-1.0.css"
    />
    <style>
      bento-youtube {
        width: 320px;
        height: 180px;
      }
    </style>

</head>

<body>

<bento-youtube id="my-video" data-videoid="dQw4w9WgXcQ">
    </bento-youtube>
    <p>
      <button id="play">Play</button>
      <button id="pause">Pause</button>
      <button id="mute">Mute</button>
      <button id="unmute">Unmute</button>
    </p>
    <script>
      (async () => {
        await customElements.whenDefined('amp-youtube');

        const video = document.querySelector('#my-video');
        const api = await video.getApi();

        document.querySelector('#play').onclick = () => {
          api.play();
        };
        document.querySelector('#pause').onclick = () => {
          api.pause();
        };
        document.querySelector('#mute').onclick = () => {
          api.mute();
        };
        document.querySelector('#unmute').onclick = () => {
          api.unmute();
        };
      })();
    </script>

</body>

操作

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

`play()`

播放视频。

api.play();

`pause()`

暂停视频。

api.pause();

`mute()`

静音视频。

api.mute();

`unmute()`

取消静音视频。

api.unmute();

`requestFullscreen()`

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

api.requestFullscreen();

属性

它还公开了以下只读属性

`currentTime` (`number`)

当前播放时间（秒）。

console.log(api.currentTime);

`duration` (`number`)

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

console.log(api.duration);

`autoplay` (`boolean`)

视频是否自动播放。

console.log(api.autoplay);

`controls` (`boolean`)

视频是否显示控件。

console.log(api.controls);

`loop` (`boolean`)

视频是否循环播放。

console.log(api.loop);

Preact/React 组件

通过 npm 导入

npm install @bentoproject/youtube

import React from 'react';
import {BentoYoutube} from '@bentoproject/youtube/react';
import '@bentoproject/youtube/styles.css';

function App() {
  return <BentoYoutube videoid="dQw4w9WgXcQ" />;
}

布局和样式

容器类型

BentoYoutube 组件具有已定义的布局大小类型。为了确保组件正确渲染，务必通过所需的 CSS 布局（例如使用 height、width、aspect-ratio 或其他此类属性定义的布局）将大小应用于组件及其直接子级（幻灯片）。这些可以内联应用

<BentoYoutube
  style={{width: 320, height: 180}}
  videoid="dQw4w9WgXcQ"
/>

或通过 className

<BentoYoutube
  className="custom-styles"
  videoid="dQw4w9WgXcQ"
/>

.custom-styles {
  height: 320px;
  width: 180px;
}

你可以使用 aspect-ratio 来响应式地调整大小

.custom-styles {
  aspect-ratio: 16/9;
}

属性

autoplay

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

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

循环

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

videoid

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

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

liveChannelid

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

params

此对象中的所有字段（autoplay 和 loop 除外）将作为查询参数添加到 YouTube iframe src。这可用于将自定义值传递到 YouTube 插件，例如是否显示控件。

键和值将进行 URI 编码。键必须采用驼峰式大小写。

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

凭据（可选）

定义 credentials 选项，如 Fetch API（omit 或 include）所指定。

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

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

标题（可选）

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

交互性和 API 使用

可以通过传递 ref 来访问 BentoYoutube 组件 API

import React, {createRef} from 'react';

function App() {
  const ref = createRef();
  return (
    <BentoYoutube ref={ref} />
  );
}

操作

BentoYoutube API 允许您执行以下操作

`play()`

播放视频。

ref.current.play();

`pause()`

暂停视频。

ref.current.pause();

`mute()`

静音视频。

ref.current.mute();

`unmute()`

取消静音视频。

ref.current.unmute();

`requestFullscreen()`

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

ref.current.requestFullscreen();

属性

它还公开了以下只读属性

`currentTime` (`number`)

当前播放时间（秒）。

console.log(ref.current.currentTime);

`duration` (`number`)

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

console.log(ref.current.duration);

`autoplay` (`boolean`)

视频是否自动播放。

console.log(ref.current.autoplay);

`controls` (`boolean`)

视频是否显示控件。

console.log(ref.current.controls);

`loop` (`boolean`)

视频是否循环播放。

console.log(ref.current.loop);

Bento Youtube

Web 组件

通过 npm 导入

通过 <script> 包含

示例

<head>

<body>

布局和样式

容器类型

属性

autoplay

循环

data-videoid

data-live-channelid

data-param-*

凭据（可选）

标题（可选）

交互性和 API 使用

<head>

<body>

操作

play()

pause()

mute()

unmute()

requestFullscreen()

属性

currentTime (number)

duration (number)

autoplay (boolean)

controls (boolean)

loop (boolean)

Preact/React 组件

通过 npm 导入

布局和样式

容器类型

属性

autoplay

循环

videoid

liveChannelid

params

凭据（可选）

标题（可选）

交互性和 API 使用

操作

play()

pause()

mute()

unmute()

requestFullscreen()

属性

currentTime (number)

duration (number)

autoplay (boolean)

controls (boolean)

loop (boolean)

通过 `<script>` 包含

`play()`

`pause()`

`mute()`

`unmute()`

`requestFullscreen()`

`currentTime` (`number`)

`duration` (`number`)

`autoplay` (`boolean`)

`controls` (`boolean`)

`loop` (`boolean`)

`play()`

`pause()`

`mute()`

`unmute()`

`requestFullscreen()`

`currentTime` (`number`)

`duration` (`number`)

`autoplay` (`boolean`)

`controls` (`boolean`)

`loop` (`boolean`)