import { _decorator, Component, VideoPlayer, view, isValid, sys, UITransform, v3 } from ‘cc’;
const { ccclass, property } = _decorator;
@ccclass(‘WeChatVideoPlayer’)
export class WeChatVideoPlayer extends Component {
private _videoPlayer: any = null;
private _isPlaying: boolean = false;
private _isLoop: boolean = false;
private _videoUrl: string = '';
onLoad() {
// 在这里可以添加事件监听
}
onDestroy() {
this.stop();
}
public createVideo(url: string, loop: boolean = false, autoplay: boolean = true) {
if (sys.platform != sys.Platform.WECHAT_GAME) {
console.warn("Not in WeChat Game environment.");
return;
}
console.log(`[WeChatVideoPlayer] 创建视频: ${url}, loop: ${loop}, autoplay: ${autoplay}`);
// 如果已存在视频实例，先清理
if (this._videoPlayer) {
console.log("[WeChatVideoPlayer] 清理之前的视频实例");
this.stop();
}
this._isLoop = loop;
this._videoUrl = url;
this._isPlaying = false;
// @ts-ignore
this._videoPlayer = wx.createVideo({
x: 0,
y: 0,
// zIndex: -9999, // 关键参数：确保视频显示在UI下层
width: window.innerWidth,
height: window.innerHeight,
src: url,
underGameView: true,
showCenterPlayBtn: false,
showProgress: false,
controls: false,
obeyMuteSwitch: true,
autoplay: autoplay,
objectFit: 'cover', // 关键点1: 使用 'cover'
enableProgressGesture: false,
loop: this._isLoop,
initialTime: 0,
backgroundColor: '#00000000',
volume: 0, // 添加音量设置，与原版保持一致
});
this._addListener();
}
private _addListener() {
if (!this._videoPlayer) return;
this._videoPlayer.onPlay(() => {
console.log("[WeChatVideoPlayer] 视频开始播放");
this._isPlaying = true;
this._adaptVideoSize();
this.node.emit(VideoPlayer.EventType.PLAYING, this);
});
this._videoPlayer.onEnded(() => {
console.log("视频播放结束");
this._isPlaying = false;
this.node.emit(VideoPlayer.EventType.COMPLETED, this);
if (this._isLoop) {
this._videoPlayer.play();
}
});
this._videoPlayer.onError((res: any) => {
console.error("视频播放错误:", res.errMsg);
this.node.emit(VideoPlayer.EventType.ERROR, this, res.errMsg);
});
// 关键点2: 监听准备就绪事件，准备好后进行尺寸适配
// 注意：iOS微信环境中可能没有onCanplay方法，改用其他事件
if (this._videoPlayer.onCanplay) {
this._videoPlayer.onCanplay(() => {
console.log("[WeChatVideoPlayer] 视频准备就绪（onCanplay），可以播放");
this._adaptVideoSize();
});
} else {
console.warn("[WeChatVideoPlayer] onCanplay不支持，使用onPlay事件代替");
// 如果onCanplay不存在，在onPlay中处理
}
}
// 关键点2的实现
private _adaptVideoSize() {
if (!this.node || !isValid(this.node)) return;
const uiTransform = this.node.getComponent(UITransform);
if (!uiTransform) return;
const videoWidth = this._videoPlayer.videoWidth || 1080;
const videoHeight = this._videoPlayer.videoHeight || 1920;
const screenSize = view.getVisibleSize();
const screenWidth = screenSize.width;
const screenHeight = screenSize.height;
const screenRatio = screenWidth / screenHeight;
const videoRatio = videoWidth / videoHeight;
let newWidth, newHeight;
if (screenRatio > videoRatio) {
// 屏幕更宽，以宽度为准
newWidth = screenWidth;
newHeight = screenWidth / videoRatio;
} else {
// 屏幕更高或比例相同，以高度为准
newHeight = screenHeight;
newWidth = screenHeight * videoRatio;
}
uiTransform.setContentSize(newWidth, newHeight);
console.log(`视频节点尺寸适配为: ${newWidth} x ${newHeight}`);
}
public play() {
if (this._videoPlayer) {
this._videoPlayer.play();
}
}
public pause() {
if (this._videoPlayer) {
this._videoPlayer.pause();
}
}
public stop() {
if (this._videoPlayer) {
this._videoPlayer.stop();
this._videoPlayer.destroy();
this._videoPlayer = null;
}
}
get isPlaying(): boolean {
return this._isPlaying;
}
}
安卓没问题，IOS在iphone11是可以的，iphone12就显示白屏幕，以后的iphone也是白屏幕。