HTML YouTube 视频
在 HTML 中播放视频最简单的方法是使用 YouTube。
对视频格式感到困扰?
将视频转换为不同格式可能既困难又耗时。
一个更简单的解决方案是让 YouTube 在您的网页中播放视频。
YouTube 视频 ID
当您保存(或播放)视频时,YouTube 会显示一个 ID(如 tgbNymZ7vqY)。
您可以使用此 ID,并在 HTML 代码中引用您的视频。
在 HTML 中播放 YouTube 视频
要在网页上播放您的视频,请执行以下操作:
- 将视频上传到 YouTube
- 记下视频 ID
- 在您的网页中定义一个
<iframe>
元素 - 让
src
属性指向视频 URL - 使用
width
和height
属性指定播放器尺寸 - 将任何其他参数添加到 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 循环播放
添加 loop=1
以便您的视频可以无限循环播放。
值 0(默认):视频仅播放一次。
值 1:视频将循环播放(永久)。
YouTube - 循环播放
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
自己动手试一试 »
YouTube 控件
添加 controls=0
以不在视频播放器中显示控件。
值 0:不显示播放器控件。
值 1(默认):显示播放器控件。
YouTube - 控件
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
自己动手试一试 »