跳到主要内容

微信兼容性适配

浏览器对视频自动播放有严格的限制(播放行为必须由用户触发),@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 中也能正常使用自动播效果。