微信小游戏的视频上如何叠加按钮（实现及踩坑记录）

2024-07-11 10:31| 来源: 网络整理| 查看: 265

新手视频是游戏表达故事背景的常见方式之一，视频中途增加按钮也是常见的需求，这里手把手教你在微信小游戏上填坑。

增加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"; } }

【本文地址】

公司简介

联系我们