HTML YouTube 视频

在 HTML 中播放视频的最简单方法是使用 YouTube。

为视频格式而烦恼吗？

将视频转换为不同格式可能既困难又耗时。

一个更简单的解决方案是让 YouTube 在您的网页中播放视频。

YouTube Video Id

当您保存（或播放）视频时，YouTube 会显示一个 ID（如 tgbNymZ7vqY）。

您可以使用此 ID 在 HTML 代码中引用您的视频。

在 HTML 中播放 YouTube 视频

要在网页上播放您的视频，请执行以下操作：

  1. 将视频上传到 YouTube
  2. 记下视频 ID
  3. 在您的网页中定义一个 <iframe> 元素
  4. 让 src 属性指向视频 URL
  5. 使用 width 和 height 属性指定播放器的尺寸
  6. 向 URL 添加任何其他参数（见下文）

实例

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

亲自试一试

YouTube 自动播放 + 静音

您可以通过在 YouTube URL 中添加 autoplay=1 来让视频在用户访问页面时自动开始播放。然而，自动播放视频会让访问者感到厌烦！

注意：Chromium 浏览器在大多数情况下不允许自动播放。但是，静音自动播放始终是允许的。

在 autoplay=1 后添加 mute=1 可以让您的视频自动开始播放（但静音）。

YouTube - 自动播放 + 静音

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>

亲自试一试

YouTube 播放列表

以逗号分隔的视频列表，用于播放（除原始 URL 外）。

YouTube 循环播放

添加 playlist=videoID 和 loop=1 可以让您的视频无限循环播放。

loop=0（默认） - 视频仅播放一次。

loop=1 - 视频将循环播放（无限循环）。

YouTube - 无限循环

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>

亲自试一试

YouTube 控件

添加 controls=0 可以在视频播放器中不显示控件。

controls=0 - 不显示播放器控件。

controls=1（默认） - 显示播放器控件。

YouTube - 控件

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>

亲自试一试