<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.