200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > pc端 移动端插入背景音乐 自动播放 循环播放

pc端 移动端插入背景音乐 自动播放 循环播放

时间:2022-03-10 04:42:41

相关推荐

pc端 移动端插入背景音乐 自动播放 循环播放

css代码(让音乐小图片在播放的时候自动旋转):

.close_music_div img{animation:run 5s linear 0s infinite;}@keyframes run{from{-webkit-transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);}}

html代码:

<div class="zp-bg-music"><p class="close_music_div"><a onclick="pauseVid()" href="javascript:void(0)"><img src="img/zp/music01.png" alt=""></a></p><p class="open_music_div"><a onclick="playVid()" href="javascript:void(0)"><img src="img/zp/music01.png" alt=""></a></p><audio id="bg-music" autoplay preload="auto" src="img/zp/bgmusic.mp3" loop="loop"></audio></div>

js代码:

$(document).ready(function(){playVid();});var myVideo=document.getElementById("bg-music");function playVid(){myVideo.play();$(".close_music_div").show();$(".open_music_div").hide();}function pauseVid(){myVideo.pause();$(".close_music_div").hide();$(".open_music_div").show();}

1、audio的属性可查w3c,里面写的很详细,加上autoplay就是自动播放的意思。

2、百度上很多说移动端(手机)设置了不能自动播放,因为浪费用户流量,但经实际测试,以上代码可行。

3、pc的就不能自动播放了,会报错,需要到浏览器里面自行设置,以chrome浏览器为例:

在浏览器输入 chrome://flags/#autoplay-policy

第一个选项 Autoplay policy 设置为 no user gesture is required

4、然后下面是在测试之前百度的别人的方法,忘记链接地址了,也是可以参考的(针对移动端不能自动播放,因为觉得代码反锁所以自己改成了上面的那种形式),没有测试过:

$(document).ready(function(){autoPlayMusic();audioAutoPlay();});function openmusic(){autoPlayMusic();audioAutoPlay();$(".close_music_div").css({"display":"block"});$(".open_music_div").css({"display":"none"});}function pauseAuto(){var myaudio = document.getElementById('bg-music');myaudio.pause();$(".close_music_div").css({"display":"none"});$(".open_music_div").css({"display":"block"});}function audioAutoPlay() {var myaudio = document.getElementById('bg-music');myaudio.play();document.addEventListener("WeixinJSBridgeReady", function () {myaudio.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();}}

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