html5新功能之五 《audio音频和video视频》
2013-07-28 18:39 臭小子1983 阅读(760) 评论(0) 编辑 收藏 举报html5作为下一代web标准,年前轩起了html5热潮。对于html5我只是本着了解看看。关于html5和RIA(silverlight,flash,JavaFx等)我不想说什么,也没有什么可说的,存在就有其存在的理由。孰优孰劣,留给事实、时间来证明的。
在html5中出现了一些新特性:
- canvas 元素
- 视频 video 和 声频audio 元素 ;
- 对本地离线存储(localStorage,sessionStorage)的支持 ;
- 新增特殊内容元素:article、footer、header、nav、section ;
- 新增表单控件: calendar、date、time、email、url、search 。
今天看看视频和声频:在html5中规定了视频的标准方法:video
<video src="xxx.ogg" controls="controls">你的浏览器还不支持哦</video>
我们也可以设置多个source,浏览器会为我们选择第一个可识别的视频来播放,形如:
<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
二、各浏览器目前对html5视频格式的支持:
浏览器 | 影音格式 | Ogg Theora | MP4(H.264) | WebM |
---|---|---|---|
Microsoft Internet Explorer9 | × | √ | × |
Mozilla Firefox5+ | √ | × | √ |
Google Chrome13+ | √ | √ | √ |
Apple Safari5+ | × | √ | × |
Opera11+ | √ | × | √ |
三、video属性有:
属性 |
值 |
描述 |
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。默认为false |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。这些控件是由浏览器来提供的,样式也可能因为不同浏览器而不一样 |
width/height | pixels | 设置视频播放器的宽、高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
preload | none、metadata、auto |
如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用"autoplay",则忽略该属性。
|
src | url | 要播放的视频的URL。 |
poster | url | 指定一张图片作为预览图,当视频数据无效时显示 |
四、媒介属性
一般用于js操作
属性 | 可读状态 | 描述 |
error | 只读 |
使用media.error返回一个MediaError对象表明当前的错误状态,如果没有出错,返回null,共有4个可能值。error.code
|
currentSrc | 只读 | 返回该媒介标签的src属性值 |
networkState | 只读 | 返回媒介的网络状态,共有4个可能值。
|
preload | 可读写 | 可获取或改变媒介标签的preload属性值 |
buffered | 只读 | 返回一个TimeRanges对象,确认浏览器已缓存媒介文件 |
readyState | 只读 |
返回媒介当前播放位置的就绪状态,共有5个可能值。
|
seeking | 只读 | 返回一个布尔值,表明浏览器是否正在请求数据,ture表示浏览器正在请求数据,false表示浏览器已停止请求。 |
seekable | 只读 | 发挥一个TimeRanges对象,表明可以对当前媒介资源进行请求。 |
currentTime | 可读写 | 获取或改变视频的播放位置。单位为秒 |
startTime | 只读 | 返回媒介文件播放的开始时间,通常为0 |
duration | 只读 | 返回文件总的播放时长 |
played | 只读 | 返回一个TimeRanges对象,标明浏览器已播放的媒介资源范围 |
paused | 只读 | 返回一个布尔值,是否暂停播放,ture表示媒介暂停播放,false表示媒介正在播放。 |
ended | 只读 | 返回一个布尔值,是否已结束,ture表示媒介已经播放完毕,false表示还未播放完毕。 |
defaultPlaybackRate | 可读写 | 返回默认的播放速率,或对其赋值,改变媒介的默认播放速率。 |
playbackRate | 可读写 | 返回当前的播放速率,或对其赋值,改变当前的媒介播放速率 |
autoplay | 可读写 | 返回一个布尔值,是否设置了自动播放,ture表示当前媒介为自动播放,false表示非自动播放,或对其赋值,设置是否自动播放。 |
loop | 可读写 | 返回一个布尔值,是否设置了循环播放,ture表示当前媒介设置了循环播放,false表示没有设置循环播放,或对其赋值,设置是否循环播放。 |
controls | 可读写 | 返回一个布尔值,是否使用了浏览器默认的播放控制栏,ture表示加载了,false表示没有加载,或对其赋值,设置是否使用浏览器默认的播放控制栏 |
volume | 可读写 | 返回的音量值,或对其赋值,改变的播放音量,范围为0到1,0相当于静音,1为最大音量。 |
muted | 可读写 | 返回一个布尔值,播放是否开启静音,ture表示没有开启静音,false表示静音,或对其赋值,设置播放是否静音。 |
五、方法:
方法 |
描述 |
play() | 播放视频 |
pause() | 暂停视频 |
load() | 重新载入视频进行播放 |
六、事件:
属性 |
描述 |
play | 开始播放之前,当调用play()方法时触发 |
pause | 停止播放调用pause()方法后触发 |
load | 重新加载视频 |
ended | 视频播放结束后调用 |
timeupdate | 当前播放的位置改变 |
loadstart | 浏览器开始请求媒体 |
progress | 浏览器正在获取媒体数据 |
error | 获取媒体数据出错 |
emptied | 媒体元素的网络状态突然变为未初始化 |
stalled | 浏览器获取数据异常 |
volumechange | 音量改变或表单 |
ratechange | 播放速率改变 |
七、示例
1、错误代码
1 <script> 2 function getId(id){ 3 return document.getElementById(id); 4 } 5 6 var oVideo = getId("oVideo"); 7 8 oVideo.addEventListener("error", function(){ 9 var error = oVideo.error; 10 switch (error.code){ 11 case 1: 12 alert("视频下载过程被中止"); 13 return false; 14 case 2: 15 alert("网络发生故障,视频下载被中止"); 16 return false; 17 case 3: 18 alert("解码失败"); 19 return false; 20 case 4: 21 alert("不支持播放的视频格式"); 22 return false; 23 } 24 }, false) 25 </script>
2、读取网络状态
1 <script> 2 function getId(id){ 3 return document.getElementById(id); 4 } 5 6 var oVideo = getId("oVideo"); 7 8 oVideo.addEventListener("progress", function(e){ // 浏览器正在获取媒体数据 9 var network = oVideo.networkState; 10 11 switch (network){ 12 case 2: 13 console.log("加载中..." + e.loaded + "/" + e.total + "byte"); // 计算已加载字结数和总字节数 14 break; 15 case 3: 16 console.log("加载失败"); 17 break; 18 } 19 }, false) 20 </script>
很简单,那我们来做一个demo。(很奇怪,chrome拖动进度条到最后视频有几率就死掉,自动播放到最后没有问题,这是bug?还是我自己的问题?)
代码如下:
<!DOCTYPE html> <html> <head> <title>html5 视频标签学习</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8;"> </head> <body> <header> <h1>自定义视频播放器</h1> <div > 当前播放 :《<span id="currentMovie">movie1</span>》<br> 当前播放速度 : <span id="currentSpeed">1X</span><br> 当前声音大小为 :<span id="currentVolume">100</span><br> </div> </header> <section> <article> <video style="float:left;" id="testVideo" preload="metadata" src="movie.ogg" height="300" controls> 你的浏览器不支持html5视频 </video> <div style="float:left;margin-left:10px;"> <h3>播放列表</h3> <ul> <li><a>movie1</a></li> <li><a>movie2</a></li> <li><a>movie3</a></li> <li><a>movie4</a></li> </ul> </div> </article> <article style="clear:both;"> <br/> <button id="play">播放</button> <button id="pause">暂停</button> <button id="stop">停止</button> <button id="prev">前一个</button> <button id="next">后一个</button> <button id="upVolume">音量+</button> <button id="downVolume">音量-</button> <button id="fastFoward">快进</button> <button id="fastBackward">快退</button> <br/> 从<input type="text" id="min" style="width:20px;" value="0"/>分跳转到<input type="text" id="sec" style="width:20px;" value="0"/>播放 <button id="locate">确认</button> </article> <section> <script type="text/javascript"> var $ = function(id){return document.getElementById(id);}; var _video = $("testVideo"); //视频列表 var playList = { current : 0, list : ["movie.ogg","war3.ogg","movie.ogv","trailer.webm","trailer.ogv"] } var videoUtil = { //播放 play : function(){ _video.play(); }, //暂停 pause : function(){ _video.pause(); }, //停止 stop : function(){ _video.currentTime = 0; _video.pause(); }, //下一个视频 next : function(){ if(playList.current == playList.list.length-1){ playList.current = 0; }else{ playList.current++; } _video.src=playList.list[playList.current]; _video.play(); }, //前一个视频 prev : function(){ if(playList.current == 0){ playList.current = palyList.list.length-1; }else{ playList.current--; } _video.src=playList.list[playList.current]; _video.play(); }, //加大声音,每次加大1/10 upVolume : function(){ _video.volume += 0.1; }, //减小声音,每次减小1/10 downVolume : function(){ _video.volume -= 0.1; }, //翻倍加快播放速度 fastFoward : function(){ //FF不支持playbackRate if(_video.playbackRate){ _video.playbackRate = _video.playbackRate*2; }else{ alert("对不起,你的浏览器不支持改变播放速度!"); } }, //降低播放速度 fastBackward : function(){ if(_video.playbackRate){ _video.playbackRate = _video.playbackRate/2; }else{ alert("对不起,你的浏览器不支持改变播放速度!"); } }, //跳转到指定时间点播放 locate : function(){ var min = $("min").value; var sec = $("sec").value; var time = parseInt(min)*60+parseInt(sec); _video.currentTime = time; _video.play(); }, bindEvent : function(){ var self = this; //绑定页面上各个按钮的事件 var btns = document.getElementsByTagName("button"); for(var i = 0 ;i < btns.length ; i++){ var el = btns[i]; el.onclick = self[el.id]; } //播放完毕自动播放下一个 _video.onended = function(){ var event = document.createEvent("HTMLEvents"); event.initEvent('click', true, true); $("next").dispatchEvent(event); } //循环检查视频的当前状态 setInterval(function(){ var speed = _video.playbackRate||1; var movie = "movie"+playList.current; var volume = parseInt(_video.volume*100); $("currentMovie").innerHTML = movie; $("currentSpeed").innerHTML = speed+"X"; $("currentVolume").innerHTML = volume; },200); } }; window.onload = function(){ videoUtil.bindEvent(); } </script> </body> </html>
在HTML5 规定了声频标准为 audio 元素,audio 元素能够播放声音文件或者音频流。
audio格式和video相似:直接行多source:
<audio controls="controls"> <source src="xx.ogg" type="audio/ogg"> <source src="xx1.mp3" type="audio/mpeg"> 你的浏览器还不支持哦 </audio>
其属性比video少了height、width、poster。
在我们的开发中多媒体越来越重要,html5出现了这些video和audio。