插入视频

插入视频可以使用<embed>、<object>或者<video>标签。

使用 <embed> 标签

<embed src="movie.swf" height="200" width="200"/>

问题

• HTML4 无法识别 <embed> 标签。您的页面无法通过验证。
• 如果浏览器不支持 Flash，那么视频将无法播放
• iPad 和 iPhone 不能显示 Flash 视频。
• 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

使用 <object> 标签

<object data="movie.swf" height="200" width="200"/>

问题

• 如果浏览器不支持 Flash，将无法播放视频。
• iPad 和 iPhone 不能显示 Flash 视频。
• 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

使用 <video> 标签

<video> 是 HTML 5 中的新标签

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

问题

• 您必须把视频转换为很多不同的格式。
• <video> 元素在老式浏览器中无效。
• <video> 元素无法通过 HTML 4 和 XHTML 验证。

最好的 HTML 解决方法

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

当前，video 元素支持三种视频格式： 

格式	Ogg	MPEG 4	WebM
IE	No	9.0+	No
Firefox	3.5+	No	4.0+
Opera	10.5+	No	10.6+
Chrome	5.0+	5.0+	6.0+
Safari	No	3.0+	No

以下是我自己的测试结果：

mp4
	IE10	IE8	Chrome	Firefox
embed	√	√	√	×
object	√	×	√	×
ogg
	IE10	IE8	Chrome	Firefox
embed	×	×	√	×
object	×	×	√	×
webm
	IE10	IE8	Chrome	Firefox
embed	×	×	√	×
object	×	×	√	×
mp4
	IE10	IE8	Chrome	Firefox
video	√	×	√	√
ogg
	IE10	IE8	Chrome	Firefox
video	×	×	√	√
webm
	IE10	IE8	Chrome	Firefox
video	×	×	√	√
mp4，ogg,webm
	IE10	IE8	Chrome	Firefox
video	√	×	√	√
mp3，ogg,webm
	IE10	IE8	Chrome	Firefox
video +<object> +<embed>	√	×	√	√
mp3，ogg,webm
	IE10	IE8	Chrome	Firefox
video +<embed>	√	√	√	√

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
<embed src="movie.mp4" width="100" height="240" />//这里去掉了object在IE8中才能正常使用
</video>