前置:以下问题是针对vue项目的解决方案

问题一:IOS中音频不能自动播放

  原因:ios禁止了音频自动播放

  解决办法:在vue的生命周期mounted中获取音频Dom并调用音频播放方法play(),注意:需要确保Dom渲染完毕后再获取音频dom,代码如下

//音频Dom
<audio :src="audioWing" ref="wing"></audio>
   //js部分
   mounted(){
let that = this
that.$nextTick(function(){
that.wingAudio = that.$refs.wing
that.wingAudio.play()
})
},

问题二:Android APP中h5音频不能播放

  问题描述:点击请求接口同时播放audio1,数据返回处理后后调用方法播放audio2,但是audio2无法播放

  原因:如果你知道请给我留言

  解决办法:在vue的生命周期mounted中获取所有音频Dom并调用音频播放方法play(),因为刚进入页面比不需要播放,所以再立即执行暂停 pause() 和音频还原方法,注意:需要确保Dom渲染完毕后再获取音频Dom。代码如下:

<audio :src="audioWing" ref="wing"></audio>
<audio :src="audioFail" ref="fail"></audio>
<audio :src="audioCoin" ref="coin"></audio>
    mounted(){
let that = this
that.$nextTick(function(){
// 获取音频dome,并且执行一次
that.failAudio = that.$refs.fail
that.coinAudio = that.$refs.coin
that.wingAudio = that.$refs.wing
that.failAudio.play()
that.wingAudio.play()
that.failAudio.pause();
that.failAudio.currentTime = 0;
that.wingAudio.pause();
that.wingAudio.currentTime = 0;
})
},

App中h5音频不能播放问题的更多相关文章

  1. chrome调试微信,app中H5网页的方法!

      调试微信,app中H5网页大概有如下几个方法: (1).我们可以直接把网页的url放在chrome浏览器中进行调试.(不涉及微信登录) (2).我们可以把网页的url放在微信开发者工具中进行调试. ...

  2. iOS APP 中H5视频默认全屏播放问题解决

    问题描述:在Android中,视频可以正常在H5页面局部播放,iOS中则自动切换至全屏模式. 查看资料得以解决,20190301记录下来. 解决方法:IOS10及以后,在 video标签页中只包含 w ...

  3. app中h5交互的一些坑 记录笔记

    1.ios开发镶嵌 h5页面 存在input 圆角问题(安卓直角) 解决办法 inpput{ -webkit-appearance: none; border-radius: 0px; } 2.ios ...

  4. APP中H5页面调试神器

    Fiddler Web Debugging Tool for Free by Telerik window 可以 下载,然后我的H5 嵌入到 APP 里面就可以快速捕捉到接口啦.不会因为看不见就得靠“ ...

  5. Appium——处理混合APP中H5的操作

    https://blog.csdn.net/iiyting/article/details/51887488

  6. H5 音频标签自定义样式修改以及添加播放控制事件

    说明: 需求要求这个音频标签首先要是可适配移动端浏览器的,音频样式就是参考微信做的. 最终效果如下: 具体实现 思路: H5 的 <audio> 标签是由浏览器负责实现默认样式的.所以不同 ...

  7. IIS 配置 FTP 网站 H5 音频标签自定义样式修改以及添加播放控制事件

    IIS 配置 FTP 网站   在 服务器管理器 的 Web服务器IIS 上安装 FTP 服务 在 IIS管理器 添加FTP网站 配置防火墙规则 说明:服务器环境是Windows Server 200 ...

  8. H5中背景音乐无法自动播放问题

    苹果禁止了Autoplay和JS "onload" 加载播放,使在html文件里使用了preload和autoplay属性,在移动版 Safari 上,此属性会被忽视,并且不会加载 ...

  9. 在iOS APP中使用H5显示百度地图时如何支持HTTPS?

    现象: 公司正在开发一个iOSAPP,使用h5显示百度地图,但是发现同样的H5页面,在安卓可以显示出来,在iOS中就显示不出来. 原因分析: 但是现在iOS开发中,苹果已经要求在APP中的所有对外连接 ...

随机推荐

  1. flask_sqlalchemy和sqlalchemy的区别有哪些?

    概要的说: SQLAlchemy是python社区使用最广泛的ORM之一,SQL-Alchmy直译过来就是SQL炼金术. Flask-SQLAlchemy集成了SQLAlchemy,它简化了连接数据库 ...

  2. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第7节 Arrays工具类_16_数组工具类Array

    在java.util的包下面.在这个包的下面是需要导包的,只有lang 的包下面是不需要导包的 查看jdk1.6的手册 Arrays让我们想起了数组,说明它提供了与数组相关的方法 我们可以看到 toS ...

  3. cmd 编码修改。 牛阿。 解决问题

    http://jingyan.baidu.com/article/e75aca85440f01142edac636.html 命令窗口修改编码,CMD编码修改方法 听语音 | 浏览:9696 | 更新 ...

  4. Python学习笔记(20)-文件和文件夹的移动、复制、删除、重命名

    一,概述 python中对文件和文件夹进行移动.复制.删除.重命名,主要依赖os模块和shutil模块,要死记硬背这两个模块的方法还是比较困难的,可以用一个例子集中演示文件的移动.复制.删除.重命名, ...

  5. MIUI8改MAC

    1.手机Root 2.RE文件管理器复制:/data/nvram/APCFG/APRDEB/WIFI 到电脑上 3.如下图用UltraEdit打开WIFI文件修改MAC 4.拷贝修改后的WIFI文件到 ...

  6. 2 Vue.js基础

    1 简易计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  7. 怎么用 pytorch 查看 GPU 信息

    如果你用的 Keras 或者 TensorFlow, 请移步 怎么查看keras 或者 tensorflow 正在使用的GPU In [1]: import torch In [2]: torch.c ...

  8. 《深入浅出WPF》学习总结之XAML标签语言一

    一.XMAL概览 1.XAML在桌面开发及富媒体网络程序的开发中扮演了HTML+CSS+JS的角色. 2.XAML可以将UI和逻辑代码分离,降低耦合度. 3.XAML是一种单纯的申明形语言 4.XAM ...

  9. 最新版 Mysql 8.0.16 创建用户权限更新回收权限

    1.创建用户语法 : create user ‘写你自己的用户名’@‘写你需要哪个IP连接你的用户(%表示所有)’ identified by ‘密码’; 案例: create user ‘wangx ...

  10. Java static关键字的重新思考

    上完Java课,虽然也写了不少的Java代码,但是一直有不少的疑惑,而static关键字一直困惑着我很久,今天无意探究竟,上知乎再仔细查了一下,发现了这个话题的优秀答案https://www.zhih ...