【HTML5】Audio/Video全解

一、标签解读

• 标签属性

        <audio> id&＃61;"media" src&＃61;"http://www.abc.com/test.mp3" controls>audio>  

src&＃xff1a;音乐的URL &＃xff08;source标签在src属性不存在时使用&＃xff09;
preload&＃xff1a;预加载&＃xff08;none、metadata、auto。如果不使用此属性&＃xff0c;默认为auto。&＃xff09; 
autoplay&＃xff1a;自动播放
loop&＃xff1a;循环播放
controls&＃xff1a;浏览器自带的控制条

• 标签属性

        <video>id&＃61;"media" src&＃61;"http://www.abc.com/test.mp4" controls width&＃61;"400px" height&＃61;"400px">  

src&＃xff1a;视频的URL
poster&＃xff1a;视频封面&＃xff0c;没有播放时显示的图片
preload&＃xff1a;预加载
autoplay&＃xff1a;自动播放
loop&＃xff1a;循环播放
controls&＃xff1a;浏览器自带的控制条
width&＃xff1a;视频宽度
height&＃xff1a;视频高度
muted:是否输出视频的声音  

二、Media对象方法和属性

• 获取HTMLVideoElement和HTMLAudioElement对象

• Media方法和属性——HTMLVideoElement 和 HTMLAudioElement 均继承自 HTMLMediaElement

1. //错误状态  
2. Media.error; //null:正常  
3. Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效  
4.   
5. //网络状态  
6. Media.currentSrc; //返回当前资源的URL  
7. Media.src &＃61; value; //返回或设置当前资源的URL  
8. Media.canPlayType(type); //是否能播放某种格式的资源  
9. Media.networkState; //0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到资源  
10. Media.load(); //重新加载src指定的资源  
11. Media.buffered; //返回已缓冲区域&＃xff0c;TimeRanges  
12. Media.preload; //none:不预载 metadata:预载资源信息 auto:  
13.   
14. //准备状态  
15. Media.readyState;   //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA  
16. Media.seeking; //是否正在seeking  
17.   
18. //回放状态  
19. Media.currentTime &＃61; value; //当前播放的位置&＃xff0c;赋值可改变位置  
20. Media.startTime; //一般为0&＃xff0c;如果为流媒体或者不从0开始的资源&＃xff0c;则不为0  
21. Media.duration; //当前资源长度 流返回无限  
22. Media.paused; //是否暂停  
23. Media.defaultPlaybackRate &＃61; value;//默认的回放速度&＃xff0c;可以设置  
24. Media.playbackRate &＃61; value;//当前播放速度&＃xff0c;设置后马上改变  
25. Media.played; //返回已经播放的区域&＃xff0c;TimeRanges&＃xff0c;关于此对象见下文  
26. Media.seekable; //返回可以seek的区域 TimeRanges  
27. Media.ended;    //是否结束  
28. Media.autoPlay; //是否自动播放  
29. Media.loop; //是否循环播放  
30. Media.play();   //播放  
31. Media.pause();  //暂停//控制  
32. Media.controls;//是否有默认控制条  
33. Media.volume &＃61; value; //音量  
34. Media.muted &＃61; value; //静音  
35.   
36. //TimeRanges(区域)对象  
37. TimeRanges.length; //区域段数  
38. TimeRanges.start(index) //第index段区域的开始位置  
39. TimeRanges.end(index) //第index段区域的结束位置 

三、Media JS事件

      事件详细说明&＃xff1a;

四、浏览器对音视频格式支持说明

　　再来张截图示意&＃xff1a;&＃xff08;http://en.wikipedia.org/wiki/Html_video_tag&＃xff09;

五、疑难杂症

　　1、mp4格式视频无法在chrome中播放

　　Chrome浏览器支持HTML5&＃xff0c;它支持原生播放部分的MP4格式&＃xff08;不用通过Flash等插件&＃xff09;。
为 什么是部分MP4呢&＃xff1f;MP4有非常复杂的含义&＃xff08;见http://en.wikipedia.org/wiki/Mp4&＃xff09;&＃xff0c;普通人对MP4的理解是后缀 为.mp4的文件。但MP4本身不是一种简单的视频格式&＃xff0c;它是一个包装了视频和音频格式的壳。至于里面的视频和音频使用什么编码格式是可变的。MP4的视频格式可以使用DivX也可使用H264&＃xff0c;Chrome只支持H264。
　　然后&＃xff0c;我猜测问题的原因是这样的&＃xff1a;Chrome浏览器见到MP4后缀的文件&＃xff0c;使用了原生HTML5视频播放起播放&＃xff0c;但却发现视频格式无法解码。对于Firefox&＃xff0c;它不支持原生播放MP4&＃xff0c;于是使用了Flash&＃xff0c;绝大部分的视频格式基本都可通过Flash播放。
　　这 篇2011年1月的消息提到Google将放弃对H264的支持&＃xff1a;http://www.infoq.com/cn/news/2011/01 /chrome-h264。这篇是Google方面的描述&＃xff1a;http://blog.chromium.org/2011/01/html-video- codec-support-in-chrome.html。如果Google不再支持在Chrome上原生播放MP4&＃xff0c;那么会调用Flash播放器播 放&＃xff0c;这样反而不会出现有些MP4文件播放不了的问题。
　　为什么Chrome不支持所有的视频编码格式&＃xff1f;绝大部份的视频编码格式都是要付版权费的&＃xff0c;Google已经为H264买了单&＃xff0c;Firefox没有Google那么有钱不愿意买。
　　最后&＃xff0c;我录制了一段教学视频&＃xff0c;指导大家怎样把各种视频转换成兼容性比较好的MP4文件。视频中使用的软件是“格式工厂”&＃xff08;http://www.formatoz.com/CN/index.html&＃xff09;&＃xff0c;这个软件基本上只是做了一个界面&＃xff0c;其核心调用了开源软件FFMPEG。由于它违反了FFMPEG的LGPL许可协议&＃xff0c;备受指责。使用Linux的朋友可以直接使用FFMPEG命令进行视频格式转换&＃xff0c;命令如下&＃xff1a;
　　ffmpeg -i infile.flv -vcodec libx264 o5.mp4
　　如果转换出的视频在某些设备还是无法播放&＃xff0c;可以试试利用MediaCoder转换兼容性更好的MP4

　　2、让服务器能正确识别多媒体的MIME类型

　　即使对浏览器来说&＃xff0c;已经设置了正确的媒体&＃xff0c;但有可能是您的服务器并不能正确识别多媒体的MIME类型。MIME类型告诉服务器如何处理不同的文件类型。如果你使用Apache&＃xff0c;则可以在.htaccess文件中添加下面的音频支持&＃xff1a;
　　AddType audio/ogg ogg AddType audio/ogg oga AddType audio/wav wav AddType mp3 AddType audio/mp4 mp4 AddType audio/mp4 mpa
　　类似地添加如下代码&＃xff0c;以支持视频&＃xff1a;
　　AddType video/webm webm AddType video/mp4 mp4 AddType video/ogg ogg AddType video/ogg ogv
　　如果不能访问服务器的.htaccess文件&＃xff0c;则有可能在服务器的控制面板地方有一个选项&＃xff0c;允许查看和添加MIME类型。
　　如果是Windows服务器&＃xff0c;那么可能需要在IIS或者web.config中进行设置在web.config文件中 。

　　3、文件格式转换的问题

　　4、能否在MP4完整下载前进行播放&＃xff1f;

　　5、避免用JS访问废除的属性

　　6、Firefox 11 以上版本的音量控制的问题

　　7、音视频播放是否完全脱离插件&＃xff1f;

　　8、如何全屏视频&＃xff1f;支持情况如何&＃xff1f;

　　9、通过HTML5技术能否访问摄像头和麦克风&＃xff1f;

　　API本身是容易使用的 &＃xff0c;但目前浏览器支持相当有限。Opera是目前唯一个实现这些功能的浏览器&＃xff0c;但只支持视频Internet Explorer 10也将对其进行部分支持,Firefox也会跟随。

　　10、autoplay在iphone/ipad中不能实现的问题

• 通过iframe 
  ?

  1 2 3 4 5 6 7 8

  var ifr&＃61;document.createElement_x("iframe");  ifr.setAttribute(&＃39;src&＃39;, "song.mp3");  ifr.setAttribute(&＃39;width&＃39;, &＃39;1px&＃39;);  ifr.setAttribute(&＃39;height&＃39;, &＃39;1px&＃39;);      ifr.setAttribute(&＃39;scrolling&＃39;, &＃39;no&＃39;);  ifr.style.border&＃61;"0px";  document.body.appendChild(ifr);

• 通过页面上的其他触摸或者点击事件来调用对应的play()方法

　　11、解决iPhone中&＃xff0c;视频自动在新窗口打开问题

      HTML

id&＃61;"player" width&＃61;"480" height&＃61;"320" webkit-playsinline>

      Obj-C

webview.allowsInlineMediaPlayback &＃61; YES;

六、参考范例&＃xff1a;音乐播放器

　　在网上看到有人用JS写的播放器&＃xff0c;木有仔细看&＃xff0c;先贴过来。感觉让我自己写想不到这么周全&＃xff0c;等后面要用再仔细寻更好方案。

　　原文地址&＃xff1a;http://www.cnblogs.com/arby/archive/2012/04/07/2436352.html

function Audio(song, playType, dom){if(!dom) {this.media &＃61; document.createElement_x(&＃39;audio&＃39;);document.body.appendChild(this.media);}else {this.media &＃61; typeof dom &＃61;&＃61; &＃39;string&＃39; ? document.getElementByIdx_x(dom) : dom;}this.currentIndex &＃61; 0;this.songList &＃61; song;this.countTotal &＃61; this.songList.length;this.playType &＃61; playType || 1;this.MusicInfo &＃61; [];this.playing &＃61; false;
}
Audio.prototype.startPlay &＃61; function(){this.media.src &＃61; this.songList[this.currentIndex].src;this._play();
}Audio.prototype._play &＃61; function(){var self &＃61; this;this.media.play();this.playing &＃61; true;this.mediaEvent(&＃39;ended&＃39; ,callback);function callback(){//单曲循环无需单独处理,只需直接调用startPlay()函数。if(self.media.currentTime &＃61;&＃61; self.media.duration){switch(self.playType){case 1:if(self.currentIndex &＃61;&＃61; self.countTotal-1){return false;}else{self.currentIndex&＃43;&＃43;;}break;case 2:self.currentIndex &＃61; Math.floor(Math.random()*self.countTotal);break;case 4:self.currentIndex&＃43;&＃43;;console.log("self.currentIndex&＃61;&＃61;",self.currentIndex);self.currentIndex &＃61; (self.currentIndex > self.countTotal-1) ? 0 : self.currentIndex;break;}self.startPlay();}}
}
Audio.prototype.playNext &＃61; function(){this.currentIndex&＃43;&＃43;;this.currentIndex &＃61; this.currentIndex > this.countTotal-1 ? 0 : this.currentIndex;this.startPlay();
}
Audio.prototype.playPrevious &＃61; function(){this.currentIndex&＃43;&＃43;;this.currentIndex &＃61; this.currentIndex <0 ? this.countTotal-1 : this.currentIndex;this.startPlay();}Audio.prototype.playPause &＃61; function(callback){if(this.playing){this.media.pause();this.playing &＃61; false;}else{this.media.play();this.playing &＃61; true;}if(!callbakc){callback();}
}Audio.prototype.getCurrentTime &＃61; function(){return this.media.currentTime;
}Audio.prototype.mediaEvent &＃61; function(eventType, callback){Event.add(this.media,eventType,callback);
}Audio.prototype.playUserTime &＃61; function(time){this.media.currentTime &＃61; time;
}
Audio.prototype.getMusicInfo &＃61; function(){this.MusicInfo.src &＃61; this.media.currentSrc;this.MusicInfo.size &＃61; this.media.duration;this.MusicInfo.name &＃61; this.songList[this.currentIndex].name;return this.MusicInfo;
}
Audio.prototype.setVolume &＃61; function(volumes){if(volumes) {this.media.volume &＃61; volumes;}else{return this.media.volume;}
}
Audio.prototype.muted &＃61; function(flag){if(flag){this.media.muted &＃61; 1;}else{this.media.muted &＃61; 0;}
}Audio.prototype.addSongToList &＃61; function(song){this.songList.push(song);this.countTotal &＃61; this.songList.length;}Audio.prototype.getBuffered &＃61; function(){return this.media.buffered;
}
var Event &＃61; {add : function(node, eventType, callback){var node &＃61; typeof node &＃61;&＃61; &＃39;string&＃39; ? document.getElementByIdx_x(node) : node;if(document.addEventListener){node.addEventListener(eventType, callback, false);}else{node.attachEvent(&＃39;on&＃39; &＃43; eventType, callback);}},remove : function(node, eventType, callback){var node &＃61; typeof node &＃61;&＃61; &＃39;string&＃39; ? document.getElementByIdx_x(node) : node;if(document.removeEventListener){node.removeEventListener(eventType, callback, false);}else{node.detachEvent(&＃39;on&＃39; &＃43; eventType, callback);}}
}var core &＃61; {formatPlayTime : function(tempTime){var temp &＃61; tempTime.toString().split(".")[0];if(tempTime<&＃61;60){temp &＃61; temp>&＃61;10? temp : "0"&＃43;temp;return "00 : " &＃43; temp;}else{var minute &＃61;Math.floor(temp/60);minute &＃61; (minute >&＃61; 10)? minute : "0"&＃43; minute;var second &＃61; temp&＃96;;second &＃61; (second >&＃61; 10)? second : "0"&＃43;second;return minute &＃43; " : " &＃43; second;}}
}