新手视频是游戏表达故事背景的常见方式之一,视频中途增加按钮也是常见的需求,这里手把手教你在微信小游戏上填坑。
-
增加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";
}
}