微信的视频和音乐的自动播放问题一直都很让人很头疼，结合自身项目，最终写了一个在安卓苹果测试都好用的方法。
项目需求：
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
版权声明：本文为博主原创文章，转载请附上博文链接！