HTML YouTube 视频
在 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/tgbNymZ7vqY">
</iframe>
亲自试一试 »
YouTube Autoplay + Mute
您可以通过在 YouTube URL 上添加 autoplay=1
来让视频在用户访问页面时自动开始播放。但是,自动开始播放视频会让您的访问者感到烦恼!
注释: 在大多数情况下,Chromium 浏览器都不允许自动播放。但始终允许静音自动播放。
Chrome 在2018年增加了更严格的自动播放政策。Chromium 浏览器不允许在所有情况下自动播放。但是,始终允许静音自动播放。
在 autoplay=1
之后添加 mute=1
,可让您的视频自动开始播放(但已静音)。
YouTube - Autoplay + Muted
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?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/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
亲自试一试 »
YouTube Controls
添加 controls=0
会使视频播放器不显示控件。
值 0:播放器控件不显示。
值 1(默认):播放器控件显示。
YouTube - Controls
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
亲自试一试 »