html5 audio/video 的那些坑

当我最近项目用到audio的时候,我们用到了jPlayer作为三方库。

功能实现了,暂停播放,进度条什么的,都很顺利的搞定了。后来考虑到当网速过慢时需要给播放按钮一个载入动画,然后就一发不可收拾了。

找到jPlayer官方文档,看了下events事件,嗯不错,事件很全,几乎能解决任何需求:

从图中可以看出,我们肯定会用到waiting和playing事件来解决刚才提出的问题。

啪啪啪搞定:

jq(‘#jPlayer‘).on($.jPlayer.event.waiting, function(){

  loadingBar.show()

});

jq(‘#jPlayer‘).on($.jPlayer.event.playing, function(){

  loadingBar.hide()

});

chrome打开,测试通过,mobile模式下也通过。下班!

程序猿的第六感也是很强,回到家脑子里突然闪过一个想法,手机测会不会有问题啊。按理说-webkit-浏览器都应该会支持的,

chrome测试了应该没问题了。但是就是有很大的感觉,移动端会出问题。果然,第二天就傻尿了。手机上微信内置浏览器,

QQ内置浏览器,系统浏览器都失效了(我的魅族魅蓝手机)。拿同事的小米4和iPhone6测试也是差不多啥反应也没有。

(⊙o⊙)噢!一定是jPlayer太渣了,这些事件支持力这么差,打开W3C教程:

事件和jPlayer的一样嘛,再看看jplayer的源码,原来就是用的原生的事件,只是它自己封装了一下而已,自己写个原生的demo,

果然还是一样。那么waiting、playing事件是不能用了的。那么时时出现缓冲显示loading条这个功能确实实现不了了。

最开始我限制3G或者2G的流量的时候发现,音频只要能播放了,再跳到接近终点的位置播放,还是能够播放出来,我一度以为audio

是载入完了,才会再播放,或者说我们项目里的音频文件都比较小,很快能载入完。那么我可以在"开始载入"事件触发显示loadingBar,在第一次开始播放时

隐藏掉loadingBar。

上面那个事件列表里,很多事件是黑的,没有详细说明。

只有:

  • loadstart
  • durationchange
  • loadedmetadata
  • loadeddata
  • progress
  • canplay
  • canplaythrough

这是一个加载流程,这么一说我可以利用这里面的canplay事件替代之前的playing,loadStart代替waiting事件,前提audio的属性要设置为preload=“none”(禁止预加载,

确实也需要让用户点击后才加载,因为用户本来就不一定要听,预加载了不就是浪费用户流量了吗)。

我以为事件列表里有详细说明的事件肯定是所有浏览器都支持的,事实上我错了,canplay事件在移动端的浏览器里表现不一,甚至不支持。

后来我又用一个较大的MP3文件测试,audio的载入流程,证实了audio和video一样,都是边载入边播放的,并不是一次载完才播放。

由于项目中的音频比较小,用2G或3G的流量情况下,只要开始播放了,就能流畅的播放下去,结合我发现的timeupdate这个事件支持比较好。

就只有暂时做个“假”的loadingBar,仅在第一次播放之前的载入过程显示loadingBar。

定义一个全局变量,判断是否开始播放:var isLoaded = 0;

在点击播放事件里控制显示loadingBar:

var play = function() {
  if(isLoaded == 0){
    loadingBar.show()

  }else{

    loadingBar.hide()

  }

}

在timeupdate事件里判断是否开始播放:

timeupdate: function(e) {
  if(e.jPlayer.status.currentTime > 0 && isLoaded == 0){
    loadingBar.hide()
    isLoaded = 1;
  }
}

后来又在W3C里发现了这个 html5视频/DOM教程 ,页面底部列出了大多数浏览器支持的方法、属性和事件。我绝逼确定waiting事件支持很不好!!

最开始我是看的这个  html5 视频/音频参考手册,上面的大多数浏览器支持列表还真不容易发现。

最后有个测试地址,如下:

这个可以看看浏览器执行了什么事件

时间: 2024-10-20 19:09:59

html5 audio/video 的那些坑的相关文章

[jPlayer] HTML5 Audio & Video for jQuery

----------------------------------------------------------------------------------------------------- The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open source (MIT) media library written in JavaScript. A jQueryplugin, (an

【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总

<audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码 <audio id=”media” src=”http://www.abc.com/test.mp3″ controls></audio> <video> 标签属性: src:视频的URL poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放

HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)

HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 <audio id="media" src="http://www.abc.com/test.mp3" controls></audio> <video> 标签属性; src:视频的URL; poster:视频封

HTML5 Audio/Video 标签,属性,方法,事件汇总

HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 1 <audioid="media"src="http://www.abc.com/test.mp3"controls></audio> <video> 标签属

The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)

http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open source (MIT) media library written in JavaScript. A jQueryplugin, (and now a Zepto plugin,) jPlayer allows you to rapidly weave cross platform audio an

[转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码   1.   <audio id="media" src="http://www.abc.com/test.mp3" controls></audio> <video>标签属性: src

html5 audio/video 操作

一些坑爹的事情,mark 一下,以后研究吧. 原生 audio 与 video 标签 http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp web audio api https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API#Web_audio_概念与使用 http://www.360doc.com/content/16/0426/09/597197_55386

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

1. 前言背景 在HTML5出现之前,Web页面访问音视频主要是通过Flash,Activex插件,还有微软后来推出的silverlight来展现的,尽管FLASH曾经风靡全球,但是随着互联网的不断发展,进入移动时代以后,Flash的风头渐渐被HTML5替代,主要原因是Flash经常爆出漏洞,安全性令人担忧,性能方面较差,对网络浏览和设备的电池也消耗比较大等等,Flash天生就是为PC而生,无法适应移动时代的特点,所以被各大厂商逐渐抛弃,连Adobe自己都已经放弃了Flash.所以HTML5是未

HTML5 Audio and Video 的新属性简介

前言:HTML5 中 Audio and Video的使用方法比较简单,但就是比较复杂,方法属性多.如果不常用的几乎难以记住,甚至有些人难以区分不同属性和方法的作用,更别说应用了.以下对Audio and Video的使用方法做了一个简单的总结,算是一个大致轮廓.至于具体的使用方法可以再网上查到,比较多就没总结. HTML5 Audio and Video 的优势 1.作为原生的浏览器支持,无需安装任何第三方插件 2.HTML5 规范提供了一套完整的多媒体脚本化控制的API,开发人员可以轻易的使