h5-video3 解决html5 audio iphone,ipd，safari不能自动播放问题
(在safri on ios里面明确指出等待用户的交互动作后才能播放media，也就是说如果你没有得到用户的action就播放的话就会被safri拦截)
var g_audio = window.g_audio = new Audio(); //创建一个audio播放器
var g_event = window.g_event = new
function() {var events = ['load', 'abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart', 'pause', 'play', 'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting', 'mediachange'];g_audio.loop = false;g_audio.autoplay = true;g_audio.isLoadedmetadata = false;g_audio.touchstart = true;g_audio.audio = true;g_audio.elems = {};g_audio.isSupportAudio = function(type) {type = type || "audio/mpeg";try {var r = g_audio.canPlayType(type);return g_audio.canPlayType && (r == "maybe" || r == "probably")} catch(e) {return false;}};g_audio.push = function(meta) {g_audio.previousId = g_audio.id;g_audio.id = meta.song_id;g_audio.previousSrc = g_audio.src;g_audio.previousTime = 0.00;g_audio.src = g_audio.currentSrc = meta.song_fileUrl;g_audio.isLoadedmetadata = false;g_audio.autobuffer = true;g_audio.load();g_audio.play();if (g_audio.previousSrc !== g_audio.src) {g_audio.play();}};for (var i = 0,l = events.length; i < l; i++) { (function(e) {var fs = [];this[e] = function(fn) {if (typeof fn !== 'function') {for (var k = 0; k < fs.length; k++) {fs[k].apply(g_audio);}return;}fs.push(fn);g_audio.addEventListener(e,function() {fn.apply(this);});};}).apply(this, [events[i]]);}this.ended(function() { //播放结束
});this.load(function() { //加载this.pause();this.play();});this.loadeddata(function() {this.pause();this.play();});this.loadedmetadata(function() {this.isLoadedmetadata = true;});this.error(function() { //请求资源时遇到错误
});this.pause(function() { //歌曲暂停播放
});this.play(function() { //歌曲播放
});
};
$$$$(document).ready(function() {if (/i(Phone|P(o|a)d)/.test(navigator.userAgent)) {$$$$(document).one('touchstart',function(e) {g_audio.touchstart = true;g_audio.play();g_audio.pause();return false;});}
});
audio使用: $$$$("#main").unbind("click").bind("click",
function() {//gid 表示歌曲id,只是一个表示，没有值不影响播放//song_fileUrl :播放歌曲地址，不能为空，有效地址g_audio.elems["id"] = gid;g_audio.push({song_id: gid,song_fileUrl: json.URL});
}); //绑定事件
方式二：
版权归作者所有，任何形式转载请联系作者。
作者：U_U（来自豆瓣）
来源：https://www.douban.com/note/527250492/
ake auto play html audio in iOS Safari the right way
由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio.
这个坑相信大家都已经踩过了, 在 iOS 9 没出现以前, 这样的 hack 方案还是妥妥的.
但 iOS 9 出现后, 发现这个方案"失效"了.
没有办法, 看来是时候升级一下 hack 方案了, 于是仔细看了下 audio 的事件.
对于能够自动播放时事件的顺序如下
loadstart -> loadedmetadata -> loadeddata -> canplay -> play -> playing
对于不能自动播放时触发的事件因系统版本不同而不同
* iPhone5 iOS 7.0.6 loadstart
* iPhone6s iOS 9.1 loadstart -> loadedmetadata -> loadeddata -> canplay
最终发现相比原来的 hack 方案, 对于 iOS 9 还需要额外的 load 一下, 否则直接 play 不能让 audio 开始播放.
audioEl.load(); // iOS 9
audioEl.play(); // iOS 7/8 仅需要 play 一下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>Fake auto play html audio in iOS Safari the right way</title>
</head>
<body><h1>在 iOS Safari 中假装自动播放 HTML5 audio(音乐) 的正确方式</h1><p>核心原理: 通过一个用户交互事件来主动 play 一下 audio</p><br><br><br><audio id="bgmusic" autoplay preload loop controls></audio><script>(function() {function log(info) {console.log(info);// alert(info);
}function forceSafariPlayAudio() {audioEl.load(); // iOS 9 还需要额外的 load 一下, 否则直接 play 无效
audioEl.play(); // iOS 7/8 仅需要 play 一下
}var audioEl = document.getElementById('bgmusic');// 可以自动播放时正确的事件顺序是// loadstart// loadedmetadata// loadeddata// canplay// play// playing// // 不能自动播放时触发的事件是// iPhone5 iOS 7.0.6 loadstart// iPhone6s iOS 9.1 loadstart -> loadedmetadata -> loadeddata -> canplay
audioEl.addEventListener('loadstart', function() {log('loadstart');}, false);audioEl.addEventListener('loadeddata', function() {log('loadeddata');}, false);audioEl.addEventListener('loadedmetadata', function() {log('loadedmetadata');}, false);audioEl.addEventListener('canplay', function() {log('canplay');}, false);audioEl.addEventListener('play', function() {log('play');// 当 audio 能够播放后, 移除这个事件
window.removeEventListener('touchstart', forceSafariPlayAudio, false);}, false);audioEl.addEventListener('playing', function() {log('playing');}, false);audioEl.addEventListener('pause', function() {log('pause');}, false);// 由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio,// 因此我们通过一个用户交互事件来主动 play 一下 audio.
window.addEventListener('touchstart', forceSafariPlayAudio, false);audioEl.src = 'http://www.w3school.com.cn/i/song.mp3';})();</script>
</body>
</html>
h5-video3 解决html5 audio iphone,ipd，safari不能自动播放问题相关推荐
- 解决html5 audio iphone,ipd，safari不能自动播放问题
解决html5 audio iphone,ipd,safari不能自动播放问题 参考文章: (1)解决html5 audio iphone,ipd,safari不能自动播放问题 (2)https:// ...
- ios html5 录音功能,HTML5 Audio 在 iOS Safari 上的有关问题
HTML5 Audio 在 iOS Safari 上的问题 最近接触一个移动短项目,做摇一摇的功能,然后摇的时候要有声音,摇中奖的时候也有声音,问题来了,iOS 5 不能用代码去触发播放声音,其实 A ...
- html5 video微信浏览器视频不能自动播放
2019独角兽企业重金招聘Python工程师标准>>> html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的 ...
- 解决iPhone手机音乐不能自动播放问题
在做h5开发的时候需要插入背景音乐,使用 html 的 audio 标签 可以实现,但是在开发过程中发现iPhone手机打开h5页面时音乐并不会自动播放,而是要点一下屏幕才会自动播放,上网找了半天,各 ...
- html手机不能自动播放音乐,解决移动端浏览器 HTML 音频不能自动播放的三种方法...
由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播放音频视频,默认屏蔽了autoplay,如果要想达到自动播放效果,需要单独处理,方法有以下几种: 第一种:添 ...
- HTML 关闭优酷自动播放,Disable HTML5 Autoplay插件，禁止页面自动播放视频和音频
Disable HTML5 Autoplay插件的功能简单且实用,安装插件后即可在网页上禁用HTML5音频和视频自动播放. 多年以来,许多网站都使用的Adobe Flash等软件来展示视频,而许多浏览 ...
- 解决移动端浏览器 HTML 音频不能自动播放的三种方法
由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播放音频视频,默认屏蔽了autoplay,如果要想达到自动播放效果,需要单独处理,方法有以下几种: 第一种:添 ...
- 解决video视频在ios中不能自动播放的问题
视频在 safri 页面不能自动播放的原因: 因为ios中明确的指出等待用户的交互动作后才能播放video,也就是说没有得到用户的action就播放的话会被safri拦截 解决方法如下: 因为这个是微 ...
- php 音频顺序播放,html5 Audio多个mp3音频顺序播放
我现在用的就是单个音频一直循环播放,就想着能不能更加多样化点,于是就有了这篇文章 实现多个html5音频顺序播放,div+js window.onload = function(){ var arr ...
- 解决上传iphone拍照的图片自动翻转的问题
昨天遇到一个奇怪的问题,客户用iphone拍照后上传的图片在生成缩略图时被翻转了, 原图 缩略图 然后我排查image类的问题,怀疑可能是这里出bug了,结果并不是这样,断点调试后发现getimage ...
最新文章
- ScalaPB（4）： 通用跨系统protobuf数据，sbt设置
- JS语法字典---网友总结
- sogou ubuntu安装（最后还是失败了，最近老失败，不知道为啥）
- 【报告分享】线上汉服消费洞察报告.pdf（附下载链接）
- 羊皮卷的实践-第二十章
- ENVI入门系列教程---一、数据预处理---5. 图像自动配准
- matlab版本和yalmip兼容,科学网—matlab cvx ＋ yalmip - 吴锐的博文
- paip.mysql 性能跟iops的以及硬盘缓存的关系
- python 截图 minicap_【Python】使用minicap对安卓手机快速截屏
- Hive窗口函数的使用
- 写代码不严谨，我就不配当程序员？
- 阿里云申请域名及域名配置https
- 查看dll文件的两种办法
- 微信公众号 隐藏菜单
- socket.io-client源码分析——建立socket连接
- 脚本及恶意网页攻击实验
- js滚动数字动画效果
- 【c语言】字符串比较
- 华为智慧屏和鸿蒙系统对比,华为智慧屏s55和v55区别-华为智慧屏s55和v55对比
- Jquery的parent和closet方法