微信兼容性适配
浏览器对视频自动播放有严格的限制(播放行为必须由用户触发),@realsee/vreo
内部已经最大限度规避了浏览器对视频自动播放的限制。
但是规避 微信浏览器中音视频自动播放限制 需要调用 微信 JS-SDK 触发 WeixinJSBridgeReady
事件后才能实现。
虽然 @realsee/vreo
并不依赖 微信 JS-SDK ,但您可以提前创建HTMLVideoElement
实例,然后再在初始化vreoplayer
实例时通过配置项指定 HTMLVideoElement
实例,可参考:
// 创建 HTMLVideoElement 实例
const creatVideo = (): HTMLVideoElement => {
const video = document.createElement("video");
video.setAttribute("playsinline", "true");
video.setAttribute("webkit-playsinline", "true");
video.setAttribute("autoplay", "true");
return video;
};
const creatAudio = (): HTMLVideoElement => {
const audio = document.createElement("audio");
audio.setAttribute("autoplay", "true");
return audio;
};
// 提前创建 Video
// 视频特效
const videoEffect = creatVideo();
// 视频广告
const modelTVVideo = creatVideo();
// 视频数字人形象
const videoInstance = creatVideo();
// 无数字人,仅音频
const audioInstance = createAudio();
// 微信限制:需在 WeixinJSBridgeReady 回调中触发一次
document.addEventListener(
"WeixinJSBridgeReady",
() => {
videoEffect.play();
modelTVVideo.play();
videoInstance.play();
audioInstance.play;
},
false
);
// 创建 Player 实例
const vreoplayer = new Player(five, {
videos: {
videoEffect, // 视频特效 时依赖的 HTMLVideoElement
modelTVVideo, // 视频广告 时依赖的 HTMLVideoElement
},
videoAgentMeshOptions: {
videoInstance,
audioInstance,
},
});
这样,在微信浏览器或微信小程序 WebView
中也能正常使用自动播效果。