新手视频是游戏表达故事背景的常见方式之一，视频中途增加按钮也是常见的需求，这里手把手教你在微信小游戏上填坑。
-
增加videoplayer组件：
【坑点1】 如果是静态填写url，这里可以将，StayOnBottom勾上，否则就不用勾了（如果未填静态url，初始化时不生效，自己用代码赋值也不会生效）
-
项目设置，将宏ENABLE_TRANSPARENT_CANVAS勾选上
-
相机设置ClearFlags为SOLID_COLOR，且ClearColor的alpha需要为0
【坑点2】预览模式下不生效，还是看不见视频的，需要在设置视频地址后设置，增加一句代码：
document.getElementById("GameDiv").style.background = "transparent";
【坑点3】引擎未实现在微信下叠加到下面，那就想办法重写微信环境下创建视频播放器的代码，并加入相关设置：
this._video = wx.createVideo({
underGameView: true,
zIndex:-9999,
});
至此，可以相对完美将视频叠在下面，因为在浏览器预览的时候，半透明的ui叠加后效果不是太好。手机上还能接受。
【坑点4】浏览器下需要将canvas背景色设置回来，否则预览的半透明叠加效果不对
if(sys.isBrowser) {
document.getElementById("GameDiv").style.background = "black";
game.canvas.style.backgroundColor = "white";
}
真的是一步一坑…
以下是全部适配代码（适用于动态设置url）：
async playVideo(url: string) {
this._adatpterWXPlatform();
this._videoPlayer.resourceType = VideoPlayer.ResourceType.REMOTE;
this._videoPlayer.remoteURL = url;
this._adaptWebPlatform();
}
private _adaptWebPlatform() {
if(sys.isBrowser) {
this._videoPlayer.stayOnBottom = true;
document.getElementById("GameDiv").style.background = "transparent";
}
}
private _adatpterWXPlatform() {
if(WECHAT) {
let impl = this._videoPlayer["_impl"];
impl.createVideoPlayer = function (url) {
if (!wx.createVideo) {
console.warn('VideoPlayer not supported');
return;
}
if (!this._video) {
this._video = wx.createVideo({
underGameView: true,
zIndex:-9999,
});
this._video.showCenterPlayBtn = false;
this._video.controls = false;
this._duration = 0;
this._currentTime = 0;
this._loaded = false;
this.setVisible(this._visible);
this._bindEvent();
this._forceUpdate = true;
}
this.setURL(url);
this._forceUpdate = true;
}
}
}
private _resetCanvas() {
if(sys.isBrowser) {
document.getElementById("GameDiv").style.background = "black";
game.canvas.style.backgroundColor = "black";
}
}
开源精神，论坛建设靠大家