移动端 h5 ios不能自动播放音乐的问题解决

时间: 2018-12-23阅读: 4431标签: 移动端

如果我们想要在一个页面自动播放背景音乐或是其他音频,在真机上往往需要使用一些其他方法才可以,比如ios是没办法调用audio.play()事件直接调用,非得添加手动点击事件才可以。接下来就说说我在项目里遇到的困难和解决办法


情况1、如是在单独的h5页面,无路由,这种情况就必须加个引导按钮点击它,或是在页面全局设置一个点击事件one,当用户第一次且仅第一次碰到页面就播放,除此之外别无他法。


情况2、如果是当用户使用hash或者有路由跳转的情况,可以使用在跳转页添加全局audio对象的方式来控制。这里使用vue举例:首先可在router/index.js里设置window.audio=null,在跳转前的页面new一个video 并将此对象赋予window.audio,然后即可在下一个页面使用audio对象。代码

/router/index.js/
window.bgMusic=null;

跳转页面 跳转事件

const audio = new Audio();
audio.addEventListener('canplay', () => {audio.play()});
audio.loop = true;
audio.src = mathBgVoice;
audio.load();
bgMusic = audio;
this.$router.replace('math_graduation')


这样处理以后,在跳转页面先寻找播放时机,等跳转到播放音乐的页面即可实现‘自动播放背景音乐’的功能。

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/1679

手淘H5移动端适配方案flexible源码分析

随着技术的飞速发展,当前lib-flexible适配方案也在逐渐被更新的适配方案所替代,但是截止目前为止,还没有发现哪种方案能完全满足适配各种机型的需要,也会有一些小的问题。lib-flexible是目前用到的比较成熟的适配方案

移动端H5开发遇到的坑

微信分享签名错误invalid signature,往返缓存问题,IOS端不支持new Date(\"2019-01-01 00:00:00\") 这种格式,微信二维码,IOS中无法点击,audio音频无法播放,fixed问题

移动端适配的两种方案及flexible和px2rem-loader在webpack下的配置

方案一:使用lib-flexible包:使用flexible包方式,安装 lib-flexible 包和 px2rem-loader包;方案二:使用less或者sass等CSS 预处理语言写适配方案:基准按照设计图尺寸,但是缺点是不通用,不同页面可能设计图基准尺寸不同

移动端缩放解决方案 hammerjs

本方案适合各种前端成熟框架,以 ionic3为例子,第一步 安装 hammerjs:npm install hammerjs;第二步 写核心缩放功能

移动web问题小结

本文主要收集一些移动web开发中常见的问题和解决办法,在日常的工作中遇到新的问题会不定时更新到文章中。屏蔽阴影、Meta标签、获取滚动条的值、禁止选择文本、css之border-box、Retina屏幕高清图片、html5重力感应事件、移动端touch事件

移动端H5页面阻止图片和文字被选中

阻止span标签等文字被选中;阻止浏览器点击图片查看的行为(常见于uc浏览器)1.背景图的方式插入(这种是比较普遍的方式),2.使用js事件阻止默认行为的方法

vconsole_移动端h5开启控制台的实现

开发内嵌在 web,可能会遇到意想不到的 bug,所以你需要你能在手机上查看的控制台。前用的是chrome的inspect调试,但是只能使用移动版的chrome查看数据,兼容不好,所以最近使用了vConsole 进行调试。

移动端适配必须掌握的基本概念和适配方案

随着技术的发展,移动设备越来越流行,并且不同设备间屏幕尺寸和屏幕像素的差异,移动端开发面临着多分辨率适配的问题

js实现移动端微信禁止字体被放大或缩小,防止排版错乱

由于微信webvie内置了调整字体大小的功能,如果用户调整了这一设置,就会导致了网页中的字体比原本的尺寸偏大或偏小,使得网页可能出现排版错乱,或者字体太小看不清的情况发生

移动端实现表头固定,tbody滚动的三种方法

实现表头固定,tbody垂直滚动。准备工作:获取页面可是区域高度。方法一:两个table,第一个table放表头,第二个table方内容,通过JS实现监听滚动事件,动态控制表头位置

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!