HTML 视频
有很多种方法将视频嵌入到网页中.
在HTML中播放视频
例子
<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>
亲自试一试 »
问题和解决方案
在HTML播放视频不是很容易
你必须添加很多技巧，确保视频支持所有浏览器(Internet Explorer, Chrome, Firefox, Safari, Opera) 和所有设备(PC, Mac , iPad, iPhone).
本章中会学习到相关问题及解决方案.
HTML视频 - 使用<embed>标签
<embed>标签定义了一个用于嵌入外部内容的容器（非HTML）
下面的HTML代码展示了在网页中嵌入Flash视频:
问题
- 如果浏览器不支持Flash，视频将无法播放
- iPad 和 iPhone不支持Flash视频
HTML视频 - 使用<object>标签
<object> 标签也定义了一个用于嵌入外部内容的容器（非HTML）.
下面的HTML代码展示了在网页中嵌入Flash视频:
问题:
- 如果浏览器不支持Flash, 视频不会播放
- iPad和iPhone不支持Flash视频
HTML5 <video> 元素
HTML5 <video>标签定义了视频或影视.
<video>元素可以支持所有的现代浏览器.
下面的例子使用HTML5<video>标签,指定了一个MP4文件(Internet Explorer, Chrome, Firefox 21+, 和Safari), 和一个OGG(支持老版本的Firefox 和 Opera). 如果显示失败，会显示文本:
例子
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
你的浏览器不支持视频标签.
</video>
亲自试一试 »
问题:
- 你必须将视频转换不同的格式
- <video>元素不支持旧版本的浏览器
HTML视频- 最好解决方案
最好的解决方案是使用HTML5 <video>元素+ the <embed>元素.
下面的例子使用<video>元素试图播放MP4文件或OGG文件. 如果播放失败, 会使用<embed> 元素播放:
HTML 5 + <object> + <embed>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
亲自试一试 »
问题:
- 你必须将视频转换不同的方式
HTML视频 - 使用超链接
如果在网址中使用超链接指定一个媒体文件, 大部分浏览器会使用"插件" 来播放文件.
下面的代码展示了使用链接指定一个Flash视频. 如果用点击链接，浏览器使用插件播放文件:
关于内联视频的技巧
当网页中嵌入视频叫做内联.
如果使用内联视频，要注意，很多用户会觉得很烦.有些用户在浏览器中会立即关闭视频.
我们的建议是只在用户期望看到视频的页面包含内联视频. 页面打开后，用户会主动点击视频进行播放.
HTML多媒体标签
= HTML5中新添加.
| 标签 | 描述 |
|---|---|
| <embed> | 定义一个嵌入对象 |
| <object> | 定义一个嵌入对象 |
| <param> | 为对象定义参数 |
| <audio> | 定义音频内容 |
| <video> | 定义视频或影视 |
| <source> | 为多媒体元素(<video>和 <audio>)定义多媒体来源 |
| <track> | 为多媒体元素(<video> 和 <audio>)定义文本轨道 |
