• 郑州网站建设-郑州网站设计-河南网站建设-手机建站-郑州建站

  • 专注网站建设 品牌的力量 值得信赖

    服务热线: 0371-63248369/15136144056

当前位置:首页 > 建站知识 > 网站设计观点 > 正文

最近苹果手机没办法播放视频,ios加载html5 audio标签用js无法自动播放

发布时间:2018年06月04日 03:54 | 发布者:新速科技 | 浏览次数:305次

html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更方便的方法,尽请留言:


html部分:


<audio id="audio"><source src="20161012102044_57fd9dfc044cd.mp3"></audio>


<script>


    audio = document.getElementById('audio');


    audio.play();


</script>


js部分:


// 函数:    


function audioAutoPlay(id)


{


    var audio = document.getElementById(id);


    var play = function() {


        document.removeEventListener("WeixinJSBridgeReady", play);


        document.removeEventListener("YixinJSBridgeReady", play);


        // document.removeEventListener("touchstart", play, false);


        audio.play();


        audio.pause();


        };


    audio.play();


    audio.pause();


    //weixin  document.addEventListener("WeixinJSBridgeReady", play, false);


    //yixin   document.addEventListener('YixinJSBridgeReady', play, false);


    //touch   document.addEventListener("touchstart", play, false);


}


//调用:


audioAutoPlay('audio1');


标签: ios, html5, js, 微信, audio标签
好文要顶 关注我 收藏该文    
MissCarrie
关注 - 7
粉丝 - 0
+加关注
0 0
? 上一篇:h5页面禁止长按出现菜单
? 下一篇:Web 前端开发规范手册
posted @ 2017-06-28 14:02 MissCarrie 阅读(913) 评论(3) 编辑 收藏


评论列表
   #1楼 2017-06-28 15:43 e2013732  
因为浏览器支持的格式不一样吧
<audio controls loop autoplay controls>
<source src="20161012102044_57fd9dfc044cd.mp3"/>
<source src="20161012102044_57fd9dfc044cd.ogg"/>
<source src="20161012102044_57fd9dfc044cd.wav"/>
抱歉,你的浏览器不支持音频标签!
</audio>

@ e2013732
ios里面没有触摸事件是无法自动播放音乐的,无论什么格式,你可以测试一下

是的, 手机上 都必须要 手动碰一下屏幕 才会能允许播放、
一般做法是 
document.addEvent.. touchstart {
audio.play();
audio.pause();
}


后面就可以随时调用 audio.play(); 进行播放了