App中h5音频不能播放问题
前置:以下问题是针对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音频不能播放问题的更多相关文章
- chrome调试微信,app中H5网页的方法!
调试微信,app中H5网页大概有如下几个方法: (1).我们可以直接把网页的url放在chrome浏览器中进行调试.(不涉及微信登录) (2).我们可以把网页的url放在微信开发者工具中进行调试. ...
- iOS APP 中H5视频默认全屏播放问题解决
问题描述:在Android中,视频可以正常在H5页面局部播放,iOS中则自动切换至全屏模式. 查看资料得以解决,20190301记录下来. 解决方法:IOS10及以后,在 video标签页中只包含 w ...
- app中h5交互的一些坑 记录笔记
1.ios开发镶嵌 h5页面 存在input 圆角问题(安卓直角) 解决办法 inpput{ -webkit-appearance: none; border-radius: 0px; } 2.ios ...
- APP中H5页面调试神器
Fiddler Web Debugging Tool for Free by Telerik window 可以 下载,然后我的H5 嵌入到 APP 里面就可以快速捕捉到接口啦.不会因为看不见就得靠“ ...
- Appium——处理混合APP中H5的操作
https://blog.csdn.net/iiyting/article/details/51887488
- H5 音频标签自定义样式修改以及添加播放控制事件
说明: 需求要求这个音频标签首先要是可适配移动端浏览器的,音频样式就是参考微信做的. 最终效果如下: 具体实现 思路: H5 的 <audio> 标签是由浏览器负责实现默认样式的.所以不同 ...
- IIS 配置 FTP 网站 H5 音频标签自定义样式修改以及添加播放控制事件
IIS 配置 FTP 网站 在 服务器管理器 的 Web服务器IIS 上安装 FTP 服务 在 IIS管理器 添加FTP网站 配置防火墙规则 说明:服务器环境是Windows Server 200 ...
- H5中背景音乐无法自动播放问题
苹果禁止了Autoplay和JS "onload" 加载播放,使在html文件里使用了preload和autoplay属性,在移动版 Safari 上,此属性会被忽视,并且不会加载 ...
- 在iOS APP中使用H5显示百度地图时如何支持HTTPS?
现象: 公司正在开发一个iOSAPP,使用h5显示百度地图,但是发现同样的H5页面,在安卓可以显示出来,在iOS中就显示不出来. 原因分析: 但是现在iOS开发中,苹果已经要求在APP中的所有对外连接 ...
随机推荐
- HTTP代理(转)
个人总结: 两篇文章介绍了https代理的两种方式: ·一种是普通http请求代理 ·一种是通过隧道进行基于tcp的代理 转两篇好文: HTTP 代理原理及实现(一) https://imququ.c ...
- 《图解设计模式》读书笔记9-2 Proxy模式
目录 Proxy模式 示例程序 程序描述 类图 程序 角色和类图 角色 模式类图 思路拓展 提升速度 代理与委托 Http代理 与其他模式的关联 Decorator模式 Proxy模式 Proxy是代 ...
- Eclipse java web项目 ,导入IntelliJ IDEA 完整操作!
1.如图,这是一个ec项目,是一个ssh框架,搭建一个后台, 我们在idea 新建一个项目:new - project from Existing sources... 要是不放心,你可以做一个文件备 ...
- Win32InputBox,C接口的,实现类似VB的InputBox的功能
#ifndef __03022006__WIN32INPUTBOX__ #define __03022006__WIN32INPUTBOX__ /* This library is (c) Elias ...
- 【ABAP系列】SAP ABAP中使用for all entries in小结
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP中使用for a ...
- 3 Vue.js基础
Vue中的过滤器.钩子函数.指令.字符串填充.以及部分方法使用的案例(操作表单) <!DOCTYPE html> <html lang="en"> < ...
- Navicat Premium 12.1.20.0安装与激活
一.Navicat Premium 12下载 链接: https://pan.baidu.com/s/1GgNbCPGahN-Z91f4dnQkBQ 提取码: 3q8f 复制这段内容后打开百度网盘手机 ...
- 解决:”ssh-keygen 不是内部或外部命令“ 的问题
相信大家在 码云生成/添加SSH公钥的过程中遇到一个比较常见的问题, 在cmd,命令行输入 ssh-keygen -t rsa -C "xxxxx@xxxxx.com" ; xxx ...
- 快速排序 && 寻找第K大(小)的数
参考:https://minenet.me/2016/08/24/quickSort.html 快速排序 利用分治法可将快速排序的分为三步: 在数据集之中,选择一个元素作为"基准" ...
- python中json的基本使用
一.json的概念 json是一种通用的数据类型 一般情况下接口返回的数据类型都是json 长得像字典,形式也是k-v{ } 其实json是字符串 字符串不能用key.value来取值,所以要先转换为 ...