微信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:

在安卓系統中，自動播放需要一個用戶交互，所以如果沒法自動播放視頻，做一個點擊或者觸摸滑動之類的交互解決這個問題。
---------------------
作者：king-w
來源：CSDN
原文：https://blog.csdn.net/qq_33401924/article/details/80389870
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！