audio元素和video元素在ios和andriod中无法自动播放
原因: 因为各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放; /音频,写法一
<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>
//音频,写法二
<audio controls="controls"> <source src="music/bg.ogg" type="audio/ogg"></source> <source src="music/bg.mp3" type="audio/mpeg"></source> //优先播放音乐bg.ogg,不支持在播放bg.mp3 </audio>
//JS绑定自动播放(操作window时,播放音乐)
$(window).one('touchstart', function(){ music.play(); })
//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () { music.play(); }, false);
小结: 1.audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常; 2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间; 3.注意不要遗漏微信的兼容处理需要引用微信JS;
相关推荐
行吟阁 2020-05-30
zhuiyuanqingya 2020-03-27
STPace 2020-03-14
WebVincent 2020-03-04
黎豆子 2020-02-18
一个客户要求给网站添加一个背景音乐,我用的是html5添加网页背景音乐的代码,在此记录一下以后有用。html5方法二:<videocontrols=""autoplay=""name="media&q
玫瑰小妖 2020-01-24
HSdiana 2019-12-27
luvhl 2019-12-11
pythonclass 2013-09-16
hickwu 2011-03-24
ITxiaobaibai 2019-11-08
Rafema 2011-08-27
luvhl 2019-10-29
Devieun 2012-06-12
HTML混合APP开发 2017-07-08
Abudula 2018-11-19
示例一和示例二 参考尚硅谷老师的视频教程;window.AudioContext){alert("当前浏览器不支持哟!DOCTYPE html><html><head><meta charset="U
来老师 2018-10-17
quanhaoH 2013-05-09
86266537 2016-04-14