HTML HTML5 PHP Mysql Linux 缓存技术 工具 资讯 读书 其他

HTML5 视频(Video)


许多现代网站使用视频. HTML5提供显示它们的标准.

检查你的浏览器是否支持HTML5视频



网上的视频

HTML5之前, 没有支持显示视频/电影的统一标准.

HTML5之前, 视频仅可以使用插件播放(如flash插件). 然而,不同的浏览器支持不同的插件.

HTML5定义了一个新元素,指定了在网页中嵌入视频或电影的标准: <video>元素.


浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

IE9+, 火狐浏览器, 欧鹏, 谷歌, 和 苹果浏览器都支持<video>元素.

注意: IE8和更早版本的,不支持<video>元素.


HTML5视频 - 是如何工作的

在HTML5中使用视频, 你需要:

例子

<video width="320" height="240" controls>
  <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>元素添加地址,设置属性,调用方法.

例子 1

创建一个简单的 播放/暂停 + 重定大小控制的视频:




上面的例子定义了两个方法: play() 和 pause(). 也用到了两个属性: 暂停 和 宽度.

亲自试一试 »

HTML5视频标签

标签 描述
<video> 定义一个视频或电影
<source> 为多媒体元素定义来源, 比如 <video>和<audio>
<track> 定义文本跟踪媒体播放器



To Top