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

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

时间: 2024-10-16 17:06:33

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

jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器

最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如何让你的网站占据优势,就要看你的功能和用户体验了.html5对video还是做了很多优惠的东西,我们使用起来很得心应手. 在过去 flash 是网页上最好的解决视频的方法,截至到目前还算是主流,像那些优酷之类的视频网站.虾米那样的在线音乐网站,仍然使用 flash 来提供播放服务.但是这种状况将会随

HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output

video 通过<video>标签,我们可以抛弃最近不怎么讨好的Flash,直接在页面中播放视频文件.视频文件自然是最符合语义化的文件格式,但该元素标签同样支持音频与图片. 过去(及目前),我们通常要使用类似下面这样繁冗丑陋的代码来将视频放置在页面中,但这种方式要求浏览器安装有Flash插件,并支持JavaScript: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="4

HTML5 视频播放 &lt;video&gt;

HTML5 中的视频播放 ===================================================================== <video> -------不需要下载任何额外的浏览器视频播放插件 -------完全由浏览器自身实现视频的解码和播放 <video src=" " controls  poster="xx.jpg"></video> ------video标签的属性-------

Pyqt 音视频播放器

在寻找如何使用Pyqt做一个播放器时首先找到的是openCV2 openCV2 貌似太强大了,各种关于图像处理的事情它都能完成,如 读取摄像头.图像识别.人脸识别.  图像灰度处理 . 播放视频等,强大的让你想不到! openCV2 播放视频也很简单: 1 #coding=utf-8 2 3 import cv2.cv as cv 4 filename = "cn.avi" 5 win_name = "video player" 6 capture = cv.Cap

iOS - AVPlayer 音视频播放

iOS - AVPlayer 音视频播放 本文目录 前言 1.本地/网络音视频播放 2.本地/网络音视频播放设置 3.AVPlayerViewControllerDelegate 画中画协议方法 回到顶部 前言 NS_CLASS_AVAILABLE(10_7, 4_0) @interface AVPlayer : NSObject @available(iOS 4.0, *) public class AVPlayer : NSObject NS_CLASS_AVAILABLE_IOS(8_0)

HTML5新标签-Video

HTML5的video新标签使用起来非常简单,功能也着实强大,简单的几行代码就可以实现视频播放功能.尤其在苹果公司拒绝在IOS设备上支持Flash的时候,HTML5的公开支持度得到了极大的提升 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title>HTML5新标签-Video</title> &

video &amp; audio

1. video和audio是来自HTML5的新方法用作对浏览器添加视频和音频. 2. 其作用于能让浏览器和用户之间交互更多样化,和对视频音频传输的更简易化. 3. video使用时候主要可以传输(ogg,MPEG4,webM)三种格式:     1. ogg:带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件.     2. MPEG4: 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件.     3. WebM: 带有 VP8 视频编码和 Vorbis

html5中视频播放问题总结

html5中视频播放问题总结 文章 1.问题一 框架? 加个标签就OK! <video id="video1" src="/video1.mp4" controls="controls"></video> 2.问题2 控制? 简单! <video id="video1" src="/video1.mp4" autoplay></video> 其他控制方式 :见

Selenium(十二):操作Cookie、调用JavaScript、HTML5的视频播放

1. 操作Cookie 有时候我们想要验证浏览器中cookie是否正确,因为基于真实cookie的测试是无法通过白盒和集成测试的.WebDriver提供了操作Cookie的相关方法,可以读取.添加和删除cookie信息. WebDriver操作cookie的方法: get_cookies():获得所有cookie信息 ge_cookie(name):返回字典的key为“name”的cookie信息 add_cookie(cookie_dict):添加cookie.“cookie_dict”指字典