HTML5 中的video标签介绍

 

 <video></video>

(1)    常见的视频格式: MP4, ogg以及webM

Browser	MP4	WebM	Ogg
Internet Explorer 9	YES	NO	NO
Firefox 4.0	NO	YES	YES
Google Chrome 6	YES	YES	YES
Apple Safari 5	YES	NO	NO
Opera 10.6	NO	YES	YES

【批注】webM是由Google公司提出的一种免费的多媒体文件格式。

(2)    常见属性：

autoplay ----------- 一种布尔属性，只要video标签中出现autoplay属性，则自动播放自然生效。通常可以将其设置成以下任何一种：

                      <video autoplay=”autoplay”>

                      <video autoplay=””>

                      <video autoplay>

controls ------------ 用法同autoplay,主要用来控制是否在页面上显示控制按钮。若出现controls属性，则代表显示控制按钮，常见的控制按钮有：播放、暂停、缓存进度(seeking)、音量、全屏控制、字幕和音频轨道。通常可以将其设置成以下任何一种：

                      <video controls =”controls”>

                      <video controls =””>

                      <video controls >

height ----------- 用来定义视频播放器的高度，相对应的属性还有width，用来设置播放器的宽度。值得注意的是，当视频启动后，播放控制按钮全部包含在视频画面中，因此在设置播放器的width或者height时，应该根据视频的实际宽高而定，否则可能导致整个页面布局出现混乱，另外还要注意宽度与高度的大小衡量单位均是像素。

loop ------------  用法同autoplay和controls,主要用来控制音视频文件是否重复播放。通常可以将其

设置成以下任何一种：

                      <video loop=”loop”>

                      <video loop=””>

                      <video loop>

muted --------- 用法同loop,目前的主流浏览器均不支持这个属性。主要用来指定视频中的音频是否静

音。通常可以将其设置成以下任何一种：

                      <video muted=”muted”>

                      <video muted=””>

                      <video muted>

poster ---------- 用来设置播放器中的预加载画面（图片），其用法如下：

                      <video poster=”URL”>

                      其中URL指定画面的相对地址或绝对地址。

preload ------------ 用来设置在页面加载过程中，视频的加载状态，对应有三种情况：全加载(auto)，仅加载元数据(meta)以及不加载(通过点击播放控制按钮触发加载,none)。语法如下：

                      <video preload="auto|metadata|none">

【批注】对元数据的了解，个人认为应该是指视频帧，因此，在设置成meta后，随着页面加载后，视频只能以帧为单位显示，说的有点啰嗦，其实就是说它不像auto一样随着页面的加载同时顺序加载全部视频，也不像none一样根本不加载视频，但是通过单击控制按钮之后，同样使得顺序加载全部视频，但是对于meta，随着页面加载，只是加载其中的某些视频帧，因此此时单击播放控制按钮，并不能达到流畅播放的效果，不过随着一段时间过后(等到视频全部下载完)，此时meta的效果同于auto，这点让我联想到两种不同的下载模式：顺序下载和乱序下载，顺序下载严格遵循数据报的编号，例如出现在直播中，因为后面的数据报未知，只能顺序加载，而若想点播一段视频，因为这段视频全部存放在视频服务器中，因此可以多线程地去下载不同的片段，这点正类似于meta属性值，扯的有点远，可能也不太准确，欢迎大家的讨论！

src ----------     用来指定视频文件的地址，跟src属性比较容易弄混的是source标签，个人认为，source标签不仅同意包含有src属性，还能定义所加入文件的类型，这点在source标签中将会讲到。更重要的一点是，在对视频格式的支持方面，不同的浏览器表现出很大的区别，若只是在video标签中利用src指定所要播放的视频，倘若用户所用的浏览器并不支持所加入的视频文件格式，而导致播放失败，但是通过在video标签中加入多个source标签来指定不同格式的视频文件(可能是同一视频的不同格式表示)，浏览器会播放第一个所支持格式的视频，说得简单点，那就是src因为只能指定一个地址限定了视频格式，而通过在video标签中通过source添加不同视频格式，达到了对多种浏览器的支持。如下例：

                   <video width="320" height="240" controls="controls">

                  <source src="movie.mp4" type="video/mp4" />

                  <source src="movie.ogg" type="video/ogg" />

                   Your browser does not support the video tag.

                  </video>

在IE 9.0和Google Chrome 6浏览器中就只是播放movie.mp4,因为前者仅仅只是支持mp4视频格式，而后者只是播放第一个所支持格式的视频,即movie.mp4.