600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > HTML 无法自动播放背景音乐

HTML 无法自动播放背景音乐

时间:2019-01-07 10:13:57

相关推荐

HTML 无法自动播放背景音乐

问题描述:

解决 移动端 访问HTML5 无法自动播放背景音乐


原因分析:

苹果为了用户着想,禁止了Autoplay和JS “onload” 加载播放,也就是说即使你在html文件里使用了preload和autoplay属性,在移动版 Safari 上,此属性会被忽视,并且不会加载视频流,甚至不会下载该视频流。除非用户物理点击一次屏幕,其实现在不止苹果手机,其他的安卓手机和部分App有时也存在背景音不能自动播放的问题。


解决方案:

在 head标签中使用的 audio 标签播放音乐

<!DOCTYPE html><html lang="en"><head><!-- Music --><audio style="display:none; height: 0" id="bg-music" preload="auto" src="youxing.mp3" loop="loop"></audio><!-- Metas --><meta charset="utf-8">

在页面中添加下面的js代码即可解决

<script>//音乐自动播放$(document).ready(function() {autoPlayMusic();audioAutoPlay();});function audioAutoPlay() {var audio = document.getElementById('bg-music');audio.play();document.addEventListener("WeixinJSBridgeReady", function() {audio.play();}, false);}// 音乐播放function autoPlayMusic() {// 自动播放音乐效果,解决浏览器或者APP自动播放问题function musicInBrowserHandler() {musicPlay(true);document.body.removeEventListener('touchstart', musicInBrowserHandler);}document.body.addEventListener('touchstart', musicInBrowserHandler);// 自动播放音乐效果,解决微信自动播放问题function musicInWeixinHandler() {musicPlay(true);document.addEventListener("WeixinJSBridgeReady", function() {musicPlay(true);}, false);document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);}document.addEventListener('DOMContentLoaded', musicInWeixinHandler);}function musicPlay(isPlay) {var media = document.querySelector('#bg-music');if (isPlay && media.paused) {media.play();}if (!isPlay && !media.paused) {media.pause();}}</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。