100%解决ios上audio不能自动播放的问题
由于ios的安全机制问题,不允许audio和video自动播放,所以想要使audio标签自动播放那是实现不了的,即使给play()也是播放不了。
解决方法:
首先,创建audio标签:<audio id="success_music" src="/success.mp3" preload="auto"></audio>,preload为自动加载
接下来,创建script标签,先获取audio对象
var audio_success = document.getElementById('success_music');
给页面一个触发动作:
$("#start").on('click',function(){
audio_success.play();
audio_success.pause();
$.get("/test/test", function() {
audio_success.play();
});
});
重点:
先播放,后暂停,之后的播放就没问题了
线上实际项目已应用,请不要置疑!
有需要短网址服务的,请访问:http://www.urlc.cn OR http://t.urlc.cn
100%解决ios上audio不能自动播放的问题的更多相关文章
- 解决ios下audio不能正常播放的问题
解决ios下audio不能正常播放的问题 ios系统下会自动屏蔽audio标签的自动播放,需要使用一个事件来驱动音频播放 this.$refs.startaudio.addEventListener( ...
- ios html5 audio 不能自动播放
//修复ios 浏览器不能自动播放音频的问题 在加载时创建新的audio 用的时候更换src即可 Xut.fix = Xut.fix||{}; if (Xut.plat.isBrowser & ...
- 关于html5 audio 标签在ios系统上不能正常自动播放的解决办法
由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio. ...
- 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- audio微信自动播放以及自定义样式
audio标签如下: <audio id="audioTag" src="" autoplay="autoplay" controls ...
- 摇一摇—微信7.0.8版本audio无法自动播放问题
近日有一个项目出现audio无法自动播放,查看原因才发现是微信版本更新为7.0.8版本,需要有交互行为,第一次播放需要用户手动点击一下,无法使用DOM中的play()进行直接播放操作,那怎么办呢? 通 ...
- iOS 微信 音频 视频自动播放
iOS 微信 音频 视频自动播放 http://www.w3ctech.com/topic/1165
- ios audio不能自动播放
今天做了一个简单的落地页项目,就是类似于手机微信上经常看到的滑动效果.因为公司要求需要自己开发,所以我就用swiper+swiper.animate开发,开发速度很快,只不过最后音乐哪里出现了一点小b ...
- audio的自动播放报错解决
使用audio标签时,当前页面没有进行交互时,比如用户刷新了页面后,play()调用就会报错,如下图 查找资料后,发现是2018年4月以后,chrome浏览器对这块进行了优化,为了节约流量,禁止了自动 ...
随机推荐
- 分页 js
纯js分页代码 ' .news-pages { } .news-page { } .page-first,.page-last { } .page-next { } .page-one { } { } ...
- 前端UI框架《Angulr》入门
Angulr 项目的名称为 Angulr,对!没错!就是少个 a,少个 a 就是它正确的拼写. 是一个以 Bootstrap 和 AngularJS 为基础,并使用了大量前端开源组件合成的一个前端UI ...
- WPF蒙板弹窗
由于界面设计需要,要给弹窗添加蒙板效果,在百度和google搜索了半天,竟然没有一个满意的方案,最后只能自己想办法实现了一个,原理还是比较简单的,现在分享给大家. 先看一下效果.. 原理其实 ...
- mysql语句的一个问题
刚才在群里有个同学提出了这么一个问题 在Mybatis的mapper文件中有一条语句这么写 说是系统不报错,也没返回,我一看句子应该没什么问题.执行的时候应该是PreparedStatement 执行 ...
- 小爬新浪新闻AFCCL
1.任务目标: 爬取新浪新闻AFCCL的文章:文章标题.时间.来源.内容.评论数等信息. 2.目标网页: http://sports.sina.com.cn/z/AFCCL/ 3.网页分析 4.源代码 ...
- [2017-08-28]Abp系列——业务异常与错误码设计及提示语的本地化
本系列目录:Abp介绍和经验分享-目录 前言 ABP中有个异常UserFriendlyException经常被使用,但是它所在的命名空间是Abp.UI,总觉得和展现层联系过于紧密,在AppServic ...
- JS中的数据类型小结
首先说说JS数据类型的分类.分为标准型和typeof类型(即控制台打印,浏览器区分) 标准型:基本类型中有:number.string.boolean.undefined.null 复合类型:obj ...
- 深度学习在 CTR 中应用
欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:高航 一. Wide&&Deep 模型 首先给出Wide && Deep [1] 网络结构: 本质上 ...
- java TreeSet应用
这篇是紧接着上一篇而写的,具体的实现TreeSet中有序的第二中方法 首先新建一个类,此类就是用于集合中存放的对象 然后定义一个类,实现Comparator中的CompareTo()方法 最后一个测试 ...
- python2 urllib2抓取51job网的招聘数据
#coding=utf-8 __author__ = "carry" import sys reload(sys) sys.setdefaultencoding('utf-8') ...