HTML5音视频播放(Video,Audio)和常见的坑处理 |
您所在的位置：网站首页 › mp3格式对了无法播放 › HTML5音视频播放(Video,Audio)和常见的坑处理 |
|
1. 前言背景 在HTML5出现之前，Web页面访问音视频主要是通过Flash，Activex插件，还有微软后来推出的silverlight来展现的，尽管FLASH曾经风靡全球，但是随着互联网的不断发展，进入移动时代以后，Flash的风头渐渐被HTML5替代，主要原因是Flash经常爆出漏洞，安全性令人担忧，性能方面较差，对网络浏览和设备的电池也消耗比较大等等，Flash天生就是为PC而生，无法适应移动时代的特点，所以被各大厂商逐渐抛弃，连Adobe自己都已经放弃了Flash。所以HTML5是未来Web多媒体的主要方向。 2. 音频格式 HTML5 Audio支持的格式有：wav，mp3和ogg格式，首先看看各大浏览器的支持情况 浏览器MP3WavOgg 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: 是否显示浏览器自带的控制条，例如播放按钮。 您的浏览器不支持音频播放//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）循环播放失效，解决方法，监听播放完成事件，手动触发播放 Looping Audio function init() { var myAudio = document.getElementById("audio"); myAudio.addEventListener('ended', loopAudio, false); } function loopAudio() { var myAudio = document.getElementById("audio"); myAudio.play(); }
5. 视频格式 视频格式也有对应的3种格式： 1、Ogg = 带有Theora 视频编码和Vorbis 音频编码的 Ogg 文件； 2、MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件； 3、WebM = 带有VP8 视频编码和Vorbis 音频编码的WebM 文件。 格式IEFirefoxOperaChromeSafari 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+ No6. 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方法然后立刻暂停 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |