HTML5的video和audio标签是用来在网页中加入视频和音频的标签,在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。
<video src=“http://gslb.miaopai.com/stream/NnUkS0dEYomMtCVnOYiIFQ__.mp4” width=“596”height=“336” controls=“true” autoplay=“true”></video>
使用html5media.js可以在所有浏览器上观看html5视频和音频文件,它弥补了低版本IE浏览器不支持<video>和<audio>标签,只需要载入html5media.js使用<video>和<audio>标签就能跨浏览器播放视频和音频。
如何使用?
想让html5的video和audio标签能在所有浏览器上工作,必须在页面的head内部加入以下一行代码:
<script src="https://down.9930.top:4466/api/html5media/1.2.2/html5media.js"></script>
然后你可以使用以下代码加入一段视频:
<video src="video.mp4" width="320" height="200" controls="true" autoplay="true"></video>
你还可以使用以下代码加入一段音频:
<audio src="audio.mp3" controls preload></audio>
关于HTML5的video标签用法:
现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用object和embed标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏览器必须安装第三方插件:Adobe Flash Player。而HTML5的到来,改变了这一事实,WEB开发者只需要使用video标签就可以轻松加载视频文件,而不需要任何第三方插件。
未来的WEB将可以在任何终端,任何平台只需通过HTML5的<video>标签就能实现加载视频文件。
WEB中的Video标签
HTML5定义了一个新的元素用来指定标准的方式来插入视频文件到web页面中:<video>标签。使用video标签可以控制视频的播放与停止,循环播放,视频尺寸等等,详情请看下表。
属性 |
值 |
描述 |
autoplay |
true | false |
如果是 true,则视频在就绪后马上播放。 |
controls |
true | false |
如果是 true,则向用户显示控件,比如播放按钮。 |
height |
像素 |
设置视频播放器的高度。 |
loop |
true | false |
完成播放后再次开始播放,即循环播放 |
poster |
url |
当视频未响应或缓冲不足时,该属性值链接到一个图像。该图像将以一定比例被显示出来 |
src |
url |
所播放视频的 url。使用子元素 <source> 实现更好。 |
width |
像素 |
设置视频播放器的宽度。 |
目前支持<video>标签的浏览器有:
IE9,Firefox, Opera,Chrome和Safari都支持<video>标签。
注意:IE8和更早的版本,不支持<video>标签。
如何使用Video
要在HTML5中播放视频,需要在body中插入以下代码:
由于旧的浏览器和Internet Explorer不支持<video>元素,考虑到兼容性,我们必须为这些浏览器找到一个支持Flash文件的解决方案。不幸的是,和HTML 5音频一样,涉及到视频的文件格式,Firefox 和 Safari/Chrome 的支持方式并不相同。因此,如果你想在这个时候使用HTML 5视频,则需要创建三个视频版本。
OGG,MP4,FLV/SWF
<video width="320" height="240" controls>
<!-- Firefox -->
<source src="mv.ogg" type="video/ogg" />
<!-- Safari/Chrome-->
<source src="mv.mp4" type="video/mp4" />
<!-- 如果浏览器不支持video标签,则使用flash -->
<embed src="http://blip.tv/play/gcMVgcmBAgA%2Em4v" type="application/x-shockwave-flash" width="1024" height="798" allowscriptaccess="always" allowfullscreen="true"> </embed> </video>
HTML5 视频标签的注意事项
1、需创建三种视频格式以实现对 Firefox,Safari/Chrome 和 IE 的支持;
2、不要省略任何一种格式。不能将HTML 5如你所想的那样兼容 Firefox 和 Safari,Safari 能解释 <video> 标签,会期望加载合适的文件,如果省略某种格式,会导致播放器空白;
3、记住全屏显示不被 Safari 和 Chrome 所支持。然而,在 Firefox 3.6 版本中,你可以全屏浏览;
4、要明白 IE 加载 Flash 文件的原因,是因为 IE 不能解释 <video> 元素。然而,如果浏览器支持,则会期望加载合适的文件。
关于HTML5的audio标签用法:
目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件。而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览器升级诸如Adobe Flash、Apple QuickTime等播放插件,只需使用现代浏览器就可以聆听任何可以发出声音的WEB网站。
WEB中的Audio标签
HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中:<audio>标签。使用audio标签可以控制音频的播放与停止,循环播放与播放次数设置,以及播放位置等等,详情请看下表。
属性 |
值 |
描述 |
autoplay |
true | false |
如果是 true,则音频在就绪后马上播放。 |
controls |
true | false |
如果是 true,则向用户显示控件,比如播放按钮。 |
end |
numeric value |
定义播放器在音频流中的何处停止播放。默认地,声音会播放到结尾。 |
loopend |
numeric value |
定义在音频流中循环播放停止的位置,默认是 end 属性的值。 |
loopstart |
numeric value |
定义在音频流中循环播放的开始位置。默认是 start 属性的值。 |
playcount |
numeric value |
定义音频片断播放多少次。默认是 1。 |
src |
url |
所播放音频的 url。 |
start |
numeric value |
定义播放器在音频流中开始播放的位置。默认地,声音在开头进行播放。 |
目前支持audio标签的浏览器有:
IE9,Firefox, Opera,Chrome和Safari都支持<audio>标签。
注意:IE8和更早的版本,不支持<audio>标签。
如何使用Audio
要在HTML5中播放音频,需要在body中插入以下代码:
<audio controls="controls">
<source src="music.ogg" />
<source src="music.mp3" />
<source src="music.wav" /> </audio>
你可以在<audio>和</audio>标签之间插入文字内容,这样如果浏览器不支持audio,那么会显示这些文字。
也许你会问auto中怎么会包含3个source标签呢?这是为了浏览器和音频格式的兼容性,浏览器制造商并非都同意使用某一种音频文件格式。例如,Chrome、Internet Explorer 9 (IE9) 和 Safari 浏览器不支持 WAV 文件,这是一种使用非压缩格式且正在衰败的标准。我们将每个视频文件名放在单独的 <source> 标签里,并且音频容器中的所有源标签都由<audio></audio> 构成,如下所示。那么,无论访问者使用什么浏览器,它都将自动选择所读取的第一个文件类型,并为您播放声音。
HTML5浏览器和音频格式兼容性
音频格式 |
Chrome |
Firefox |
IE9 |
Opera |
Safari |
OGG |
支持 |
支持 |
支持 |
不支持 |
不支持 |
MP3 |
支持 |
不支持 |
支持 |
不支持 |
支持 |
WAV |
不支持 |
支持 |
不支持 |
支持 |
不支持 |
此外,不同浏览器音频空间外观也不一样。
HTML5 让开发人员可以更轻松地提供大量WEB体验。<audio>标签是令人兴奋的新添内容,不再需要外部音乐播放器,使音频的提供像显示图像一样简单。有了基于标准的音频控件和让用户更易于与声音进行交互的新浏览器功能,你可以轻松的在WEB页面上定制MP3播放器了。