1. 前言背景
在HTML5出现之前,Web页面访问音视频主要是通过Flash,Activex插件,还有微软后来推出的silverlight来展现的,尽管FLASH曾经风靡全球,但是随着互联网的不断发展,进入移动时代以后,Flash的风头渐渐被HTML5替代,主要原因是Flash经常爆出漏洞,安全性令人担忧,性能方面较差,对网络浏览和设备的电池也消耗比较大等等,Flash天生就是为PC而生,无法适应移动时代的特点,所以被各大厂商逐渐抛弃,连Adobe自己都已经放弃了Flash。所以HTML5是未来Web多媒体的主要方向。
2. 音频格式
HTML5 Audio支持的格式有:wav,mp3和ogg格式,首先看看各大浏览器的支持情况
浏览器 | MP3 | Wav | Ogg |
---|---|---|---|
Internet Explorer 9+ | YES | NO | NO |
Chrome 6+ | YES | YES | YES |
Firefox 3.6+ | YES | YES | YES |
Safari 5+ | YES | YES | NO |
Opera 10+ | YES | YES | YES |
先安利一下格式的定义:
Ogg:一种新的音频压缩格式,是完全免费、开放和没有专利限制的。
MP3:是一种音频压缩技术。它被设计用来大幅度地降低音频数据量。
WAV:为微软公司开发的一种声音文件格式,声音文件质量和CD相差无几。
opera,chrome和firefox对三种模式都支持,而微软和苹果则对自己有专利利益的mp3格式情有独钟,而对潜在竞争者开源的ogg进行了封杀,ogg是一种为了对抗mpeg(音频上就是mp3)格式开发的一种音视频技术,但他的关系比较微妙,因为目前没有哪个正式的公司敢直接使用ogg,因为商业推广ogg存在专利诉讼风险,之所以目前还没有人诉讼ogg,是因为目前没有大鱼上钩,不值得诉讼,但是反过来一旦诉讼失败,ogg被证明没有侵权mpeg,那以后mpeg就没有人使用了。
3. audio 标准API
src
: 要播放的音频的 URL。preload
: 是否预加载,如果使用 "autoplay",则忽略该属性。autoplay
: 是否自动播放。loop
: 是否循环播放。controls
: 是否显示浏览器自带的控制条,例如播放按钮。
<audio controls> <source src="test.ogg" type="audio/ogg"> <source src="test.mp3" type="audio/mpeg"> <source src="test.wav" type="audio/wav"> 您的浏览器不支持音频播放 </audio>
//js获取Dom对象 var audio_test = new Audio("test.mp3"); var audio_test = document.getElementById("audio_test");
DOM对象方法:
canPlayType(type);能否播放某个资源文件,返回三个字符串之一:empty、maybe 或 probably
load();重新加载资源
pay();播放
pause();暂停
DOM对象属性,因为比较多这里只展示了几个重要属性:
- Media.currentSrc; //返回当前资源的URL
- Media.src = value; //返回或设置当前资源的URL
- Media.currentTime = value; //当前播放的位置,赋值可改变位置
- Media.volume = value; //音量
- Media.muted = value; //静音
3. audio实际上的坑
Audio标签API其实非常简单,但只有PC浏览器支持的比较好,移动端却因为流量问题存在各种坑。
(1)自动播放
ios Safari会忽视autoplay属性,原因据官方说明是因为流量问题,Safari认为不让用户确认就下载音频文件会引起流量问题,所以禁止了这个功能,除了ios,高版本的安卓(5.0)部分机器也存在这个问题,为了绕开这个功能必须要做一些处理:
解决办法就是在页面上新增一个按钮,当用户点击按钮时播放音乐
$(‘#myBtn‘).on(‘touchstart‘,function(){ var audio = $(‘#audio‘)[0]; audio.load(); audio.pause(); audio.play(); })
(2)单例问题:估计也是因为流量问题,iOS Safari的音频对象是单例的,也就是说你无法播放多个音频文件,当你load多个音频时,后一个会覆盖前一个,有一个解决思路,就是把两个音频文件合并成一个文件,加载后通过设置声音的位置来播放不同的音乐,类似于CSS中的雪碧图原理。
var audio= $(‘#audio‘)[0], audioConfig= { sound1: {//第一个声音 start: 0, length: 1 }, sound2: {//第二个声音 start: 1.5, length: 2 } } //播放声音1 audio.currentTime = audioConfig.sound1.start;
audio.play(); var stopFunc= function() { if (this.currentTime >= audioConfig.sound1.start + audioConfig.sound1.length) { this.pause() } } audio.addEventListener(‘timeupdate‘, stopFunc, false);
//播放声音2
audio.currentTime = audioConfig.sound2.start; audio.play(); var stopFunc2 = function() { if (this.currentTime >= audioConfig.sound2.start + audioConfig.sound2.length) { this.pause() } } audio.addEventListener(‘timeupdate‘, stopFunc2, false);
(3)循环播放
部分机型(ios)循环播放失效,解决方法,监听播放完成事件,手动触发播放
<!doctype html> <html> <head> <title>Looping Audio</title> <script type="text/javascript"> function init() { var myAudio = document.getElementById("audio"); myAudio.addEventListener(‘ended‘, loopAudio, false); } function loopAudio() { var myAudio = document.getElementById("audio"); myAudio.play(); } </script> </head> <body > <audio id="audio" src="myAudio.m4a" controls></audio> </body> </html>
5. 视频格式
视频格式也有对应的3种格式:
1、Ogg = 带有Theora 视频编码和Vorbis 音频编码的 Ogg 文件;
2、MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件;
3、WebM = 带有VP8 视频编码和Vorbis 音频编码的WebM 文件。
格式 | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
6. video标准API
src :视频的属性
poster:视频封面,没有播放时显示的图片
preload:预加载
autoplay:自动播放
loop:循环播放
controls:浏览器自带的控制条
width:视频宽度
height:视频高度
Media.canPlayType(type); //是否能播放某种格式的资源
Media.load(); //重新加载src指定的资源
Media.play(); //播放
Media.pause(); //暂停
7. video中的坑
(1)自动播放,类似于audio标签,video也需要进行类似的操作
(2)多视频播放,同样也是要采用衔接,设置currenttime的方法来实现,还有一种方法是设置dom的src属性,再第一个视频播放完毕时,设置src属性再进行play也是可以播放多个视频的,但是缺点是,新的视频需要加载,缓冲时间。
(3)循环播放类似于Audio标签也是通过事件来处理
(4)预加载,preload属性ios下是不支持的,android下也不能检测是否加载成功,所以通用的做法是对视频进行play方法然后立刻暂停