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格式，首先看看各大浏览器的支持情况
| 浏览器 | 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 onload="init();">
<audio id="audio" src="myAudio.m4a" controls></audio>
</body>
</html>
5. 视频格式
视频格式也有对应的3种格式：
| 格式 | 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
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方法然后立刻暂停
HTML5音视频播放(Video,Audio)和常见的坑处理的更多相关文章
- html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
- html5之音频、视频(video&audio)
音频&视频 本篇为本人的学习笔记. 在Html5之前,浏览器对于视频和音频的处理并没有一个标准.因此在网页中看到的视频,都是通过第三插件的方式嵌入的,如:QuickTime.RealPlaye ...
- HTML5_音视频标签 <audio> 和 <video>
HTML5_音视频标签 <audio> 和 <video> audio 和 video 都是 inline行内元素 如果浏览器支持,则不显示标签文本 IE8 不支持 audio ...
- jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器
最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...
- HTML5笔记2——HTML5音/视频标签详解
音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...
- HTML5音/视频标签详解
一.发展历: 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Qu ...
- Pyqt 音视频播放器
在寻找如何使用Pyqt做一个播放器时首先找到的是openCV2 openCV2 貌似太强大了,各种关于图像处理的事情它都能完成,如 读取摄像头.图像识别.人脸识别. 图像灰度处理 . 播放视频等,强 ...
- FFmpeg简易播放器的实现-音视频播放
本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10235926.html 基于FFmpeg和SDL实现的简易视频播放器,主要分为读取视频文 ...
- 使用html5进行视频播放
一直以来网页大多是使用 flash 来播放视频.在目前唱衰 flash 的环境下,HTML5 为我们带来了一个网页内视频播放的解决方案—— <video>标签. 在HTML5 中,可以通过 ...
随机推荐
- TOSCA自动化测试工具--new Project
1.在默认页面点击Project 进入new project页面 2.第一步出来的页面上点击new 3. 第2步弹出的页面上选择路径,project 名 3.OK之后就创建好了
- 对Java CAS的一些了解（正在整理学习中）
①引言 在JDK 5之前Java语言是靠synchronized关键字保证同步的,这会导致有锁 锁机制存在以下问题: (1)在多线程竞争下,加锁.释放锁会导致比较多的上下文切换和调度延时,引起性能问题 ...
- C/C++结构体总结
1 #include"iostream" 2 using namespace std; 3 4 struct TestStruct 5 { 6 ...
- Java：延迟功能的Robot在Lunix系统上会报错
Java:延迟功能的Robot在Lunix系统上会报错 关于延迟功能的Robot: 今天开发过程中发现,本机开发好的项目,部署到Lunix服务器竟然报错!查了代码发现: Robot r = new R ...
- 设置 vadio 和checkbox是否选中
1.js方案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>te ...
- JavaScript常用工具方法封装
因为工作中经常用到这些方法,所有便把这些方法进行了总结. JavaScript 1. type 类型判断 isString (o) { //是否字符串 return Object.prototype. ...
- 编码解码--三种常见字符编码简介：ASCII、Unicode和UTF-8
什么是字符编码? 计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特(bit)作为一个字节(byte),所以,一个字节能表示的最大的整数就是255( ...
- centos 查询mysql配置文件位置
具体指令: 1.which mysqld (”which 文件名“ : 搜索命令所在路径及别名) 2./usr/sbin/mysqld --verbose --help | grep -A 1 'D ...
- nginx解决跨域问题
背景:由于公司有个项目是.net写的,但是开发人员已经离职好久了.老项目也不怎么变动就没有招新人,于是乎就把项目交接给了一位php开发人员. 今天那位php开发人员跑过来,说https://wap.a ...
- SpringBoot项目结构介绍
一项目结构介绍 springboot框架本身对项目结构并没有特别的要求,但是按照最佳的项目结构可以帮助我们减少可能遇到的错误问题.结构如下: (1)应用主类SpringbootApplication应 ...