HTML5音视频播放(Video,Audio)和常见的坑处理

时间 2019-11-09

标签 html5 html 音视频播放 video audio 常见的处理栏目 HTML5 繁體版

原文原文链接

1. 前言背景javascript

　　在HTML5出现以前，Web页面访问音视频主要是经过Flash，Activex插件，还有微软后来推出的silverlight来展示的，尽管FLASH曾经风靡全球，可是随着互联网的不断发展，进入移动时代之后，Flash的风头渐渐被HTML5替代，主要缘由是Flash常常爆出漏洞，安全性使人担心，性能方面较差，对网络浏览和设备的电池也消耗比较大等等，Flash天生就是为PC而生，没法适应移动时代的特色，因此被各大厂商逐渐抛弃，连Adobe本身都已经放弃了Flash。因此HTML5是将来Web多媒体的主要方向。html

2. 音频格式java

　　HTML5 Audio支持的格式有：wav，mp3和ogg格式，首先看看各大浏览器的支持状况android

浏览器	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

　　先安利一下格式的定义：　　ios

Ogg：一种新的音频压缩格式，是彻底免费、开放和没有专利限制的。chrome

MP3：是一种音频压缩技术。它被设计用来大幅度地下降音频数据量。浏览器

WAV：为微软公司开发的一种声音文件格式，声音文件质量和CD相差无几。安全

　　opera,chrome和firefox对三种模式都支持，而微软和苹果则对本身有专利利益的mp3格式情有独钟，而对潜在竞争者开源的ogg进行了封杀，ogg是一种为了对抗mpeg(音频上就是mp3)格式开发的一种音视频技术，但他的关系比较微妙，由于目前没有哪一个正式的公司敢直接使用ogg，由于商业推广ogg存在专利诉讼风险，之因此目前尚未人诉讼ogg，是由于目前没有大鱼上钩，不值得诉讼，可是反过来一旦诉讼失败，ogg被证实没有侵权mpeg，那之后mpeg就没有人使用了。网络

3. audio 标准APIdom

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种格式：

一、Ogg = 带有Theora 视频编码和Vorbis 音频编码的 Ogg 文件；

二、MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件；

三、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方法而后马上暂停