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');

 

posted @ 2020-03-05 16:39  双木君  Views(2427)  Comments(0Edit  收藏  举报