问题描述：

解决移动端访问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>

HTML 无法自动播放背景音乐相关推荐

uniapp 自动播放背景音乐
uniapp 自动播放背景音乐 1.引入wx js-sdk的js文件 import wxj from "@/static/js/jweixin-1.6.0.js" //这是wx j ...
微信浏览器H5页面自动播放背景音乐
微信浏览器H5页面自动播放背景音乐最近遇到一个需求一个文章详情页(图文结合) 进入页面后自动播放背景音乐正常用video标签后安卓打开后是自动播放的但是ios是不支持自动播放的经过不懈努力的 ...
手机端网页自动播放背景音乐相关资料
做手机端活动页面的时候,经常会遇到打开页面自动播放背景音乐的需求.但是很多开发人员在实现这个需求时会遇到各种各样不能自动播放或有些场景可以有些场景不行的现象,现在总结一下手机端自动播放背景音乐的资料. ...
解决H5项目微信浏览器安卓系统无法自动播放背景音乐的问题
背景制作的H5项目,使用vedio标签,利用wx.getNetworkType来自动播放背景音乐. 但是安卓的vedio自动播放被微信浏览器限制了. 解决方案采用web vedio api 细节解 ...
微信小程序进入某一页面自动播放背景音乐
前言:微信小程序进入某一个页面自动播放背景音乐,当退出这个页面时,音乐关闭 wxml代码: <audioloopid="greetings"src="https:/ ...
微信端自动播放背景音乐
在微信公众号里面实现背景音乐自动播放,发现使用autoplay之后只有Android端起效,苹果手机不能自定播放,解决方法如下所示: HTML: <audi ...
【小程序】微信小程序进入自动播放背景音乐
需求:打开微信小程序后音乐自动后台播放,切换不同页面不受影响在需要首次播放的页面所在文件夹,打开页面.js文件首先构造 const back = wx.getBackgroundAudioMana ...
H5自动播放背景音乐（IOS和安卓）
安卓与IOS播放安卓可以直接使用audio标签进行播放 <audioref="sound":src="bgm.mp3"loop /> const ...
vue js 进来页面自动播放背景音乐
<div >//src:相对应的音乐文件地址<audio id="audio" :src="require('../static/audio.mp3') ...

HTML 无法自动播放背景音乐

问题描述：

原因分析：

解决方案：

HTML 无法自动播放背景音乐相关推荐

最新文章

热门文章