Andriod Html5 audio/video手机播放遇到的坑

WEB前端 Alice 1年前 (2019-05-29) 254次浏览 0个评论

今天在测试安卓 app 的时候,同事的 vivo 手机音频播放不了,其它安卓手机都没问题,页面用的 audio,代码如下
html 代码
Andriod Html5 audio/video 手机播放遇到的坑
js 代码
Andriod Html5 audio/video 手机播放遇到的坑
我一开始想的是:是不是 audio 的 src 路径不完整,找不到音频文件,所以播放不了?
于是将 src 修改如下
Andriod Html5 audio/video 手机播放遇到的坑
一测试还是不行,再想到是不是这款手机的内置浏览器不支持 audio,于是用如下代码测试了下,

<audio id="audio1" src="xxxx.mp3" controls="controls">你的浏览器不支持</audio>

果然不支持,那么将 audio 改成 video 试试(为了测试方便,video 是可视的)
Andriod Html5 audio/video 手机播放遇到的坑
结果还是不行。然而直接点击 video 是可以播放的,

这是为什么?点击事件触发 play 不行么,抓狂 ing。度娘上搜了 N 多资料,绝大部分都是点击事件触发 play,也有提到监听事件监听 play 和 pause,结果一点都不起作用,还有一种说法是安卓内置的浏览器对 audio 标签存在约束,可以通过第三方软件来设置权限,然而没说第三方软件是什么,失望 ing,还有提到要用 5+的 Audio 模块,

去看了下资料,囧~~~ :arrow: ,太多了,弃之,搜索关键词也发生了下面一些变化,

基本上每个关键词都看 2.3 页,只要是触发 play 事件的一律略过,最后终于找到了这样一篇文章,

http://blog.okbase.net/jquery2000/archive/4485.html

Andriod Html5 audio/video 手机播放遇到的坑

提到了 trigger(‘play’),感觉和.play()差不多,但还是抱着试试的心情将 js 代码改写如下,
Andriod Html5 audio/video 手机播放遇到的坑
一测试,哇,能播放了,happy~~~ :mrgreen:

PS:最终我也没明白为什么.play()事件不起作用,而 trigger(‘play’)却可以,有知道的小伙伴们可以发表下看法哦,感谢~~~


女程序员博客 , 版权所有丨本站采用BY-NC-SA协议进行授权 , 转载请注明Andriod Html5 audio/video 手机播放遇到的坑
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址