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对象属性，因为比较多这里只展示了几个重要属性：

  1. Media.currentSrc; //返回当前资源的URL
  2. Media.src = value; //返回或设置当前资源的URL
  3. Media.currentTime = value; //当前播放的位置，赋值可改变位置
  4. Media.volume = value; //音量
  5. 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种格式：


     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方法然后立刻暂停
												


											
HTML5音视频播放(Video,Audio)和常见的坑处理的更多相关文章
	

    
								
  1. html5中的video标签和audio标签
		
    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
    
		
    2. 
						
  2. html5之音频、视频(video&audio)
		
    音频&视频 本篇为本人的学习笔记. 在Html5之前,浏览器对于视频和音频的处理并没有一个标准.因此在网页中看到的视频,都是通过第三插件的方式嵌入的,如:QuickTime.RealPlaye ...
    
		
    3. 
						
  3. HTML5_音视频标签 <audio> 和 <video>
		
    HTML5_音视频标签 <audio> 和 <video> audio 和 video 都是 inline行内元素 如果浏览器支持,则不显示标签文本 IE8 不支持 audio ...
    
		
    4. 
						
  4. jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器
		
    最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...
    
		
    5. 
						
  5. HTML5笔记2——HTML5音/视频标签详解
		
    音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...
    
		
    6. 
						
  6. HTML5音/视频标签详解
		
    一.发展历: 早期:<embed>+<object>+文件   问题:不是所有浏览器都支持,而且embed不是标准.   现状:Realplay.window media.Qu ...
    
		
    7. 
						
  7. Pyqt 音视频播放器
		
    在寻找如何使用Pyqt做一个播放器时首先找到的是openCV2 openCV2 貌似太强大了,各种关于图像处理的事情它都能完成,如 读取摄像头.图像识别.人脸识别.  图像灰度处理 . 播放视频等,强 ...
    
		
    8. 
						
  8. FFmpeg简易播放器的实现-音视频播放
		
    本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10235926.html 基于FFmpeg和SDL实现的简易视频播放器,主要分为读取视频文 ...
    
		
    9. 
						
  9. 使用html5进行视频播放
		
    一直以来网页大多是使用 flash 来播放视频.在目前唱衰 flash 的环境下,HTML5 为我们带来了一个网页内视频播放的解决方案—— <video>标签. 在HTML5 中,可以通过 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Please check registry access list (whitelist/blacklist)
			
    https://blog.csdn.net/sprita1/article/details/51735566
    
			
    2. 
						
  2. Hexo博客部署codingNet静态资源无法加载
			
    用Hexo搭建的个人博客,部署到github的pages的话,好像百度搜索不到.所以在国内的codingNet的pages服务也一起部署一下,这样方便国内国外搜索引擎收录进来.具体部署教程我是参考这里 ...
    
			
    3. 
						
  3. 使用selenium前学习HTML介绍
			
    <!-- HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (mark ...
    
			
    4. 
						
  4. spring项目gitignore
			
    target/ ### STS ### .apt_generated .classpath .factorypath .project .settings .springBeans ### Intel ...
    
			
    5. 
						
  5. How to Enable RPMForge Repository in RHEL/CentOS 7.x/6.x/5.x
			
    RPMforge repository is a utility that is used to install third party software packages under Red Hat ...
    
			
    6. 
						
  6. was控制台英文改成中文
			
    在安装was的时候没有选中简体中文包,所以导致安装后的was控制台显示中文,但是没关系,我们还是通过界面配置来修改,使得控制台从英文变为中文 1.vnc远程到服务器2./opt/IBM/Install ...
    
			
    7. 
						
  7. Log4j 2.0 使用说明(1) 之HelloWorld
			
    以下是Log4j2.0的类图,以便大家对2.0有一个整体的理解. 就如我们学习任何一个技术一样,这里我们首先写一个Hello World: 1,新建工程TestLog4j 2,下载Log4j 2.0有 ...
    
			
    8. 
						
  8. 解决msi文件在XP上安装未完成
			
    下载Ocra工具,然后删除"DIRCA_CheckFx"和"VSDCA_VsdLaunchConditions"这两个Action即可.第一步,下载并打开Ocr ...
    
			
    9. 
						
  9. 二、nginx 安装目录详解
			
    rpm -ql nginx 路径 类型 介绍 /etc/logrotate.d/nginx  配置文件  Nginx 日志轮转,用于logrotate服务日志切割 /etc/nginx /etc/ng ...
    
			
    10. 
						
  10. HTML5 history API，创造更好的浏览体验
			
    HTML5 history API有什么用呢? 从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残 ...
    
			
    11.