HTML YouTube 视频

• HTML 视频
• HTML5 简介

在 HTML 中包含视频的最简单的方法是，使用 YouTube。

纠结视频格式？

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

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

YouTube Video Id

保存（或播放）视频时，YouTube 会显示一个 id（例如 ih1l6wb7LhU）。

您可以使用这个 id，并在 HTML 代码中引用您的视频。

在 HTML 中保费 YouTube 视频

如需在网页上播放视频，请执行以下操作：

• 将视频上传到 YouTube
• 记下视频 id
• 在您的网页中定义 <iframe> 元素
• 让 src 属性指向视频的 URL
• 使用 width 和 height 属性来规定播放器的尺寸
• 向 URL 添加其他参数（参阅下文）

实例

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

亲自试一试

YouTube Autoplay + Mute

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

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

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

YouTube – Autoplay + Muted

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

亲自试一试

YouTube Playlist

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

YouTube Loop

添加 loop=1 会让您的视频永远循环。

值 0（默认）：视频将播放一次。

值 1：视频将循环（永远）。

YouTube – Loop

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

亲自试一试

YouTube Controls

添加 controls=0 会使视频播放器不显示控件。

值 0：播放器控件不显示。

值 1（默认）：播放器控件显示。

YouTube – Controls

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

亲自试一试

• HTML 视频
• HTML5 简介