html5 是我用currentTime方法后,audio没有快进,反而js audio 从头播放开始播放,这是怎么

当我最近项目用到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。
上面那个事件列表里,很多事件是黑的,没有详细说明。
durationchange
loadedmetadata
loadeddata
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里发现了这个&&,页面底部列出了大多数浏览器支持的方法、属性和事件。我绝逼确定waiting事件支持很不好!!
最开始我是看的这个&&,上面的大多数浏览器支持列表还真不容易发现。
最后有个测试地址,如下:
阅读(...) 评论()/ 新闻 NEWS
面对市场,我们拒绝平庸,面对困难,我们从不屈服,面对挑战,我们异常兴奋;对于现有的一切成就,我们从没感到过满足,我们每天都在快乐的进步着,这就是端觉。
HTML5 audio标签使用js进行播放控制
分类:网站常识
&audio&标签可以在HTML5浏览器中播放音频文件。
&audio&默认提供一个控制面板,但是有些时候我们只需要播放声音,控制面板由我们自己来定义其显示的状态。
这里我们可以使用JS来进行控制,代码如下:
window.onload = function(){
initAudio();
var initAudio = function(){
//audio = document.createElement(&audio&)
//audio.src=&Never Say Good Bye.ogg&
audio = document.getElementById(&audio&);
function getCurrentTime(id){
alert(parseInt(audio.currentTime) + &:秒&);
function playOrPaused(id,obj){
if(audio.paused){
audio.play();
obj.innerHTML=&暂停&;
audio.pause();
obj.innerHTML=&播放&;
function hideOrShowControls(id,obj){
if(audio.controls){
audio.removeAttribute(&controls&);
obj.innerHTML = &显示控制框&
audio.controls = &controls&;
obj.innerHTML = &隐藏控制框&
function vol(id,type , obj){
if(type == &up&){
var volume = audio.volume + 0.1;
if(volume &=1 ){
volume = 1 ;
audio.volume =
}else if(type == &down&){
var volume = audio.volume & 0.1;
if(volume &=0 ){
volume = 0 ;
audio.volume =
document.getElementById(&nowVol&).innerHTML = returnFloat1(audio.volume);
function muted(id,obj){
if(audio.muted){
audio.muted =
obj.innerHTML = &开启静音&;
audio.muted =
obj.innerHTML = &关闭静音&;
//保留一位小数点
function returnFloat1(value) {
value = Math.round(parseFloat(value) * 10) / 10;
if (value.toString().indexOf(&.&) & 0){
value = value.toString() + &.0&P;
调用方式如下:
&a href=&javascript:void(0);& onclick=&getCurrentTime(&firefox&);&&获取播放时间&/a&
&a href=&javascript:void(0);& onclick=&playOrPaused(&firefox&,this);&&播放&/a&
&a href=&javascript:void(0);& onclick=&hideOrShowControls(&firefox&,this);&&隐藏控制框&/a&
&a href=&javascript:void(0);& onclick=&muted(&firefox&,this);&&开启静音&/a&
&input type=&button& value=&+& id=&upVol& onclick=&vol(&firefox& , &up& , this )&/&音量&input type=&button& value=&-& onclick=&vol(&firefox& , &down& ,this )&/&
&audio src=&/images/audio/Never Say Good Bye.ogg& id=&audio& controls=&controls& &&/audio&
当前音量:&span id = &nowVol&& & &/span&
本文来源于成都网站建设公司与成都网站设计制作公司-端觉互动成都公司!
关键词:成都网站建设、成都网站建设公司、成都网站设计、成都网站设计公司、成都网站制作、成都网站制作公司、成都高端网站建设、成都高端网站设计、高端网站建设、高端网站设计
关键词搜索
我们每天都在快乐地进步着,这就是端觉!html5 audio video currentTime 失效的解决方法
html5 audio video 不需要插件即可播放音频和视频。
currentTime 可以用来设置播放的起点,设置以后就不必每次都从文件开头播放。
如果 html5 audio video 使用 currentTime 设置失效,很有可能是你使用了 php asp jsp 等脚本来动态输出媒体文件内容。
对于流媒体,currentTime 不会生效,需要直接 链接 .mp3 .mp4 等格式文件才能支持使用 currentTime 调整播放进度。
使用格式 audio | vidio .currentTime =
其中 n 代表起始播放的秒数。}

我要回帖

更多关于 html5 audio 快进 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信