html 手机端 解决部分手机无法自动播放音乐,视频自动播放
1、音乐自动播放
<section class="music rotate hide"> <audio loop src="/static/diseasesGame/video/2.mp3" id="audio_play" autoplay preload></audio> </section> $('.music').show(); var play = true; document.addEventListener("WeixinJSBridgeReady",function(){$("#audio_play").get(0).play()}); $('.music').on('click', function () { if (play) { $('#audio_play')[0].pause(); $(this).removeClass('rotate'); play = false; } else { $('#audio_play')[0].play(); $(this).addClass('rotate'); play = true; } });
2、视频自动播放
<video controls id="video2" autoplay playsinline="playsinline" x5-video-player-type="h5-page" x5-video-player-fullscreen="true" x5-playsinline="" x5-video-orientation="portraint" webkit-playsinline="" > <source src="/static/diseasesGame/video/03.mp4?1" type="video/mp4">您的浏览器不支持 video 标签。 </video> window.playVideo = function (videoId, cbVideoBegin, cbVideoEnd, cbVideoEnd1, time) { var _this = this, firstVisit = true, firstVisit1 = true; var media = document.getElementById(videoId); if(!isWeiXin()){ enableInlineVideo(media); } media.currentTime = 0; media.play(); lastMedia = media; wx.ready(function () { WeixinJSBridge.invoke('getNetworkType', {}, function (e) { media.play(); }); }); // $(media).off('timeupdate').on('timeupdate', function () { // var currentTime = media.currentTime; // var duration = media.duration; // }); // $(media).on('ended', function () { // if (firstVisit1 && typeof(cbVideoEnd1) === 'function') { // } // // }); }; autoPlayVideo('video2');