html 添加audio 无法自动播放,移动端不支持audio自动播放解决方案

在开发webapp时，有时候你可能要加点背景音乐，这时我们会用到HTML5音频Audio。

你可能会这样写：

您的浏览器不支持音频播放。

做完后我们放PC端测试可以完美的进行自动播放(当然，是在你浏览器支持的情况下)。然后拿手机来试试看，你会发现有些手机里可以自动播放，而有些不能。

这是为什么呢？

在移动端，相对来说，流量是很珍贵的，而且有些时，作为用户，我可能不希望你是自动播放的。考虑到用户体验，所以有些手机浏览器把这个自动播放的功能给禁掉了。

查阅资料可以知道，在safri on ios里面已经明确指出等待用户的交互动作后才能播放media,也就是说如果你没有得到用户的action就播放的话就会被safri拦截。

看到这里一般很多人以为这样可以解决：

var audio = document.getElementById('audio');

window.οnlοad=function(){

audio.play();

}

然并软.....其实这样你还是没有和浏览器进行交互的,是不行的。

那么我们还有其它的解决方案么？

其实有个障眼法的解决方法，在我们一般打开手机网站,我们的手指是不是会不经意的就碰到了屏幕,想到这里，这样我们就可以给html或body添加个这样的事件：

$('html').on('touchstart',function(){

audio.play();

});

OK！这样自动播放我们就解决了......

等等......but我们有可能会加个按钮来控制音乐的开关。这样后面发现,我可能不想听这背景音乐，只想静静的浏览页面，当我点击关闭音乐按钮后,我继续浏览页面,这时手碰到了屏幕,声音又播放了,可是我之前关闭音乐就是为了不想它播放,显然这样是不好的。

所以感觉要用one()才更合适,让它只能运行一次该事件处理函数。

$('html').one('touchstart',function(){

audio.play();

});

完美!!!

html 添加audio 无法自动播放,移动端不支持audio自动播放解决方案相关推荐

HTML5中的audio在手机端和微信端的不能自动播放
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流量所设置的通常解决方法是给一个交互事件: 标签: <audio loop ...
HTML5中的audio在手机端和微信端的自动播放
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的通常解决方法是给一个交互事件,一定要是交互事件标签:<aud ...
如何禁止视频在手机移动端页面中全屏播放
最近公司的项目中出了需要在局部播放视频的需求,我们都知道HTML5中有一个专门的标签video用来嵌入视频.不过,这个video标签有很多的属性可能很多同学并不是很熟悉,下面我们来认识一下: 在网页里 ...
html5自动播放音乐外链,HTML5 audio 如何实现播放多个MP3音频
标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. 标签常用属性如下表属性值描述 autoplay autoplay 添加该属性后,音频会 ...
移动端网站背景视频自动播放兼容方案-jsmpeg
移动端视频背景播放视频用video会有很多问题,qq浏览器,百度浏览器等会将视频固定在最上方等等问题,因此利用ffmpeg将视频转换成ts文件,用jsmpeg进行播放. 1.先下载jsmpeg: ht ...
解决新版Chrome拦截自动播放（Google浏览器不支持audio自动播放问题）
Google浏览器不支持audio自动播放声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在20 ...
pc端、移动端插入背景音乐，自动播放，循环播放
css代码(让音乐小图片在播放的时候自动旋转): .close_music_div img{animation:run 5s linear 0s infinite; } @keyframes run{ ...
h5 ios Safair下载文件自动添加.html导致文件乱码问题，ios不能使用接口播放视频的问题
需求:h5 页面下载pdf,doc,docx,xlsx,xls 文件的功能在安卓手机和 ios上的uc浏览器是可以正常的下载或者预览的但是在ios的Safair 下载时会被自动添加html尾缀 ...
ios html5 audio mp3,H5 audio 微信端在IOS上不能播放音乐
前言在做各种HTML5场景页面的时候,插入背景音乐是一个很普遍的需求.我们都知道,iOS下的safari是无法自动播放音乐的,以至一直以来形成了一种认知,iOS是无法自动播放媒体资源的.直到微信火爆 ...

html 添加audio 无法自动播放,移动端不支持audio自动播放解决方案

html 添加audio 无法自动播放,移动端不支持audio自动播放解决方案相关推荐

最新文章

热门文章