最新的Web开发教程

HTML YouTube视频


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


与视频格式挣扎?

不同版本不同的浏览器都支持不同的视频格式。

在本教程的前面,你所看到的,你可能有您的视频转换成不同的视频格式,使之发挥在所有浏览器。

视频转换到不同的格式可以是困难且耗时。

更简单的解决方案可能是由YouTube在网页中播放视频。


YouTube视频ID

YouTube将显示一个ID (like XGSy3_Czz8k)当您保存(or play)视频。

您可以使用此ID,并参阅您的视频在HTML中。


播放YouTube视频在HTML

要播放视频的网页上,请执行以下操作:

  • 将视频上传到YouTube
  • 请记视频的ID
  • 定义一个<iframe>在您的网页元素
  • src属性点到视频网址
  • 使用width和height属性来指定播放器的尺寸
  • 任何其他参数添加到URL

实施例-使用的iFrame (the recommended method)

<iframe width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>
试一试»

YouTube的参数

自动隐藏

值0:玩家控制始终可见。

值1:在影片播放的播放器控件会自动隐藏。

值2 (default) :如果播放机有16:9或4:3的比例,同1中,作为否则为0相同。

自动播放

值0 (default) :视频不会自动播放的播放器加载时。

值1:视频将自动播放的播放器加载时。

控制

值0:播放器控件不显示。 紧接在视频负载。

值1 (default) :播放器控制显示。 紧接在视频负载。

值2:球员控制显示,但用户发起的播放之前的视频不加载。

循环

值0 (default) :视频将只播放一次。

值1:视频将环(forever)

播放列表

以逗号分隔的视频播放列表(in addition to the original URL)


的YouTube <object>嵌入功能

YouTube的<object>嵌入视频,从2015年1月弃用。

您应该迁移应用程序使用<iframe>嵌入。

实施例-使用<object> (deprecated)

<object width="420" height="315"
data="http://www.youtube.com/embed/XGSy3_Czz8k">
</object>
试一试»

实施例-使用<embed> (deprecated)

<embed width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
试一试»