微信H5自动播放音乐，视频解决方案

      微信的视频和音乐的自动播放问题一直都很让人很头疼，结合自身项目，最终写了一个在安卓苹果测试都好用的方法。

项目需求：

• H5中插播两段视频，要求能自动播放
• 需要有背景音乐，能自动播放
• 能控制音乐和视频的声音静音

在微信中需要用到WeixinJSBridge这个接口，具体的可以百度了解一下，这个是微信游览器自带的接口API。

1.定义视频的自动播放事件 

 function autoPlayAudio(id) {
        var video = document.getElementById(id);//video标签id=media
       
        if (window.WeixinJSBridge) {
            WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                video.play();
            }, false);
        } else {
            document.addEventListener("WeixinJSBridgeReady", function () {
                WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                    video.play();
                });
            }, false);
        }
        video.play();

        return false;
    }

2.定义音乐的自动播放事件

function  audioAutoPlay(id){
        var audio = document.getElementById(id);
    
        if (window.WeixinJSBridge) {
            WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                audio.play();
            }, false);
        } else {
            document.addEventListener("WeixinJSBridgeReady", function () {
                WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                    audio.play();
                });
            }, false);
        }
        audio.play();

        return false;
    }

然后页面HTML代码

1.背景音乐

<audio id="audio2" style="display: none;" src="__IMG__/one/1.mp3" preload="auto" loop="loop"></audio>

2.视频video

<video id="videoID2" style="object-fit: fill;" x-webkit-airplay="true"  playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" width="100%" preload="auto" src="__IMG__/2.mp4"></video>

3.调用方法

if (ua.match(/MicroMessenger/i) == "micromessenger") {
   //在微信中打开
   autoPlayAudio('video');
   audioAutoplay('audio')
  }else {
    $('#video').get(0).play();
    $('#audio').get(0).play();
         }

4.关闭音乐

// 关闭音乐
    $('.music-pic').click(function () {
        if($('.music-pic').hasClass('close')){

            $('#videoID2').get(0).muted=false;
            $('#videoID').get(0).muted=false;
            document.getElementById("audio2").muted=false;
            $('.music-pic').removeClass('close');
        }else {
            $('.music-pic').addClass('close');
            document.getElementById("audio2").muted=true;
            $('#videoID2').get(0).muted=true;
            $('#videoID').get(0).muted=true;
        }
    })

    function resetmedia()
    {
        document.getElementById("audio2").pause();
        $('#videoID2').get(0).pause();
        $('#videoID').get(0).pause();
    }

tips:

扫描二维码关注公众号，回复： 5496575 查看本文章

在安卓系统中，自动播放需要一个用户交互，所以如果没法自动播放视频，做一个点击或者触摸滑动之类的交互解决这个问题。