HTML5 视频(Video)
许多现代网站使用视频. HTML5提供显示它们的标准.
检查你的浏览器是否支持HTML5视频
网上的视频
HTML5之前, 没有支持显示视频/电影的统一标准.
HTML5之前, 视频仅可以使用插件播放(如flash插件). 然而,不同的浏览器支持不同的插件.
HTML5定义了一个新元素,指定了在网页中嵌入视频或电影的标准: <video>元素.
浏览器支持
IE9+, 火狐浏览器, 欧鹏, 谷歌, 和 苹果浏览器都支持<video>元素.
注意: IE8和更早版本的,不支持<video>元素.
HTML5视频 - 是如何工作的
在HTML5中使用视频, 你需要:
例子
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持video标签.
</video>
亲自试一试 »
添加控制属性控制视频, 如:播放、暂停、声音.
它也包括完美的宽高属性.如果设置了宽高属性,页面加载时,会预留出视频的需求. 然而, 没有这些属性, 浏览器不知道视频的大小,不知道保留多少适当的空间给它.会影响页面的布局(当视频加载时).
浏览器不支持<video>元素是,你可以在<video> 和 </video>标签间插入文本内容.
<video>元素允许多个<source>元素. <source>元素可以链接不同的视频文件.浏览器将使用第一个公认的格式.
视频格式和浏览器的支持
目前,有3种格式的视频支持<video>元素: MP4, WebM, and Ogg:
浏览器 | MP4 | WebM | Ogg |
---|---|---|---|
IE | 支持 | 不支持 | 不支持 |
谷歌 | 支持 | 支持 | 支持 |
火狐 |
不支持
更新: 火狐29,在Windows 7, Windows 8, Windows Vista, 和Android 上运行支持MP4 |
支持 | 支持 |
苹果 | 支持 | 不支持 | 不支持 |
欧鹏 | 不支持 | 支持 | 支持 |
- MP4 = MPEG 4文件H264视频编解码器和AAC音频编解码器
- WebM = WebM文件VP8视频编解码器和Vorbis音频编解码器
- Ogg = Ogg Theora的文件视频编解码器和Vorbis音频编解码器
视频格式的MIME类型
格式 | MIME类型 |
---|---|
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
HTML5 <video> - DOM方法和属性
HTML5的<video> 和 <audio> 元素有DOM方法, 属性, 和事件.
这些方法、属性和事件允许你使用使用JavaScript操纵<video>和<audio>元素.
例子中使用的方法包括播放, 暂停, 加载, 和属性 (如声音). 还包括DOM事件可以操纵当<video>元素开始播放、暂停、结束等.
下面的例子说明,使用一个简单的方式,如何为 <video>元素添加地址,设置属性,调用方法.
HTML5视频标签
标签 | 描述 |
---|---|
<video> | 定义一个视频或电影 |
<source> | 为多媒体元素定义来源, 比如 <video>和<audio> |
<track> | 定义文本跟踪媒体播放器 |