@cc-component/cc-video 1.0.1

package/assets/video/base/VideoPlayTT.ts

@@ -0,0 +1,338 @@
+import { _decorator, assetManager, Component, Node, VideoClip, VideoPlayer, view } from 'cc';
+import { BaseVideo, IVideoParam } from './IVideo';
+import { ImageAsset } from 'cc';
+import { Texture2D, SpriteFrame, Sprite, UITransform } from 'cc';
+import { Size } from 'cc';
+import { Vec3 } from 'cc';
+const { ccclass, property } = _decorator;
+declare var tt: any;
+@ccclass('VideoPlayTT')
+export class VideoPlayTT extends BaseVideo {
+
+    onTimeUpdate: (data: { position: number, duration: number }) => void = null
+    pauseFinish: Function
+    onError: Function = null
+    onVideoEnd: Function = null
+    onRead: Function = null
+    data: { position: number, duration: number } = {
+        position: 0,
+        duration: 0
+    }
+    videoName: string = ""
+    videoPlayer: any
+    isPlaying: boolean = false
+    isReady: boolean = false;
+
+    getisPause() {
+        return !this.isPlaying
+    }
+    // node: Node;
+    taskId: string;
+    param: IVideoParam = {
+        isLoop: true,
+        isLocal: true,
+        isPlayTime: false,
+        isTargetSize: false
+    }
+    initParam: { bundle: string, dir: string }
+    remoteURL: string;
+
+    videoTexture: Texture2D;
+    imgAsset: ImageAsset;
+    video_sp: Sprite
+    video_sp_ut: UITransform;
+    video_sprite: SpriteFrame;
+    canPlay: boolean = false;
+    is_stop: boolean = false;
+
+    initVideo(initParam: { bundle: string, dir: string }) {
+        this.initParam = initParam
+        this.video_sp = this.node.getComponent(Sprite);
+        this.video_sp_ut = this.video_sp.getComponent(UITransform);
+        this.imgAsset = new ImageAsset();
+        this.videoTexture = new Texture2D();
+        this.video_sprite = new SpriteFrame();
+
+        // const sp = new SpriteFrame()
+        // this.videoTexture = new Texture2D();
+        // sp.texture = this.videoTexture
+        // this.imgAsset = new ImageAsset();
+        // this.videoTexture.image = this.imgAsset;
+        // this.video_sp.spriteFrame = sp;
+        //this.videoPlayer = this.createVideoWX('', true)
+        this.actioveSelf(false)
+
+        // this.video_sp.spriteFrame = new SpriteFrame();
+        // this.videoPlayer = this.createVideoWX("", true)
+        // this.imgAsset = new ImageAsset();
+        // this.imgAsset.reset(this.videoPlayer);
+        // this.videoTexture = new Texture2D();
+        // this.videoTexture.image = this.imgAsset;
+        // this.video_sp.spriteFrame.texture = this.videoTexture;
+        // const size = view.getVisibleSize();
+        // this.videoPlayer.width = size.width;
+        // this.videoPlayer.height = size.height
+        //this.video.videoHeight / this.video.videoWidth * width;
+        // const uiTransform = this.videoSpriteNode.getComponent(UITransform);
+        // uiTransform.width = this.video.width;
+        // uiTransform.height = this.video.height;
+        //this.video.play();
+
+
+
+    }
+    //创建视频地址(可能要做缓存处理)
+    public createVideoWX(remoteUrl: string, isloop: boolean = false) {
+        const self = this;
+        const windowInfo = tt.getSystemInfoSync();
+        const { windowWidth, windowHeight } = windowInfo;
+        let video = tt.createOffscreenVideo();
+        video.onError(self.videoError.bind(self))
+        video.onEnded(self.videoEnd.bind(self));
+        video.onTimeUpdate(self.onUpdate.bind(self))
+        video.onPlay(self.onPlay.bind(self))
+        video.onPause(self.onPause.bind(self))
+        return video;
+    }
+
+    onCanplay() {
+        // if (this.is_stop) {
+        //     console.warn('停止')
+        //     return
+        // } else {
+        // }
+        console.warn('准备好了')
+        this.videoTexture = new Texture2D();
+        this.imgAsset.reset(this.videoPlayer);
+        this.videoTexture.image = this.imgAsset;
+        this.video_sprite.texture = this.videoTexture;
+        this.video_sp.spriteFrame = this.video_sprite
+
+        this.videoPlayer.width = this.videoPlayer.videoWidth;
+        this.videoPlayer.height = this.videoPlayer.videoHeight;
+        this.canPlay = true;
+        this.videoPlayer.play()
+        // this.isReady = true;
+        // this.readyPlay()
+
+    }
+    public async loadVideo(name: string, param: IVideoParam) {
+        this.videoName = name
+        this.param = param;
+        // 首次调用tt.creatCanvas方法时创建的canvas为上屏canvas，之后创建的均为离屏canvas
+
+        this.destroyVideo()
+        this.isReady = false;
+        this.is_stop = false;
+        this.videoPlayer = this.createVideoWX(name, true)
+        this.actioveSelf(true)
+
+
+        this.videoPlayer.src = name;
+        this.videoPlayer.onCanplay(this.onCanplay.bind(this))
+
+        this.videoPlayer.loop = param.isLoop
+        const is_skip = name === this.remoteURL;
+        this.remoteURL = name;
+        if (!param.isTargetSize)
+            this.autoSize()
+
+    }
+
+    update(dt: number): void {
+        //if (this.videoPlayer && this.video_sp && this.video_sp.spriteFrame && this.isPlaying) {
+        if (this.videoPlayer && this.video_sp && this.video_sp.spriteFrame && this.canPlay) {
+            this.imgAsset.reset(this.videoPlayer);
+            this.videoTexture.updateImage();
+            this.video_sp.spriteFrame.texture = this.videoTexture;
+        }
+    }
+
+
+    // this.video = globalThis.tt.createOffscreenVideo();
+    // // 传入视频src
+    // this.video.src = "your video url";
+    // this.video.onCanplay(() => {
+    //   const imgAsset = new ImageAsset();
+    //   imgAsset.reset(this.video);
+    //   this.videoTexture = new Texture2D();
+    //   this.videoTexture.image = imgAsset;
+    //   const spFrame = new SpriteFrame();
+    //   spFrame.texture = this.videoTexture;
+    //   this.videoSpriteNode.getComponent(Sprite).spriteFrame = spFrame;
+    //   const width = view.getVisibleSize().width;
+    //   this.video.width = width;
+    //   this.video.height = this.video.videoHeight / this.video.videoWidth * width;
+    //   const uiTransform = this.videoSpriteNode.getComponent(UITransform);
+    //   uiTransform.width = this.video.width;
+    //   uiTransform.height = this.video.height;
+    //   this.video.play();
+    // });
+
+    play(isloop?: boolean) {
+        if (isloop != undefined || isloop != null) {
+            this.videoPlayer.loop = isloop
+        }
+        this.is_stop = false;
+
+        this.videoPlayer.play();
+        this.isPlaying = true
+    }
+    async pause() {
+        super.pause();
+        return new Promise<void>((resolve, reject) => {
+            this.pauseFinish = resolve;
+            this.videoPlayer.pause();
+            this.isPlaying = false
+
+            console.log("暂停")
+        })
+
+    }
+    stop() {
+        this.videoPlayer.stop();
+        this.isPlaying = false
+        console.log("停止")
+        this.canPlay = false;
+
+    }
+
+    resume() {
+        this.videoPlayer.resume();
+        this.isPlaying = true
+    }
+
+    seek(time: number) {
+        //console.error('seek', time)
+        this.videoPlayer.seek(time)
+    }
+
+    private videoEnd() {
+        //  if (!this.isloop) this.node.off(VideoPlayer.EventType.COMPLETED, this.videoEnd, this);
+        this.onVideoEnd?.();
+    }
+    private playIng() {
+        //  if (!this.isloop) this.node.off(VideoPlayer.EventType.PLAYING, this.playIng, this);
+        //this.isPlaying = true
+        //this.callReadBack && this.callReadBack()
+    }
+
+    private async readyPlay() {
+        this.videoPlayer.pause()
+        this.onRead?.(this)
+
+        this.scheduleOnce(() => {
+            this.isPlaying = false
+        })
+        // if (!this.isloop) this.node.off(VideoPlayer.EventType.READY_TO_PLAY, this.readyPlay, this);
+    }
+    private videoError(err: any) {
+
+        this.onError?.(err);
+    }
+    private onPlay() {
+        this.isPlaying = true
+        if (!this.isReady) {
+            this.isReady = true;
+            this.is_stop = false
+            this.readyPlay()
+        }
+        this.isReady = true;
+    }
+    onPause() {
+        if (this.pauseFinish) {
+            this.pauseFinish()
+            this.pauseFinish = null
+        }
+    }
+
+    protected onDestroy(): void {
+        this.destroyVideo()
+    }
+
+    protected onUpdate(data: any): void {
+        if (this.isPlaying && this.param.isPlayTime) {
+            this.onTimeUpdate?.(data)
+
+        }
+    }
+
+    async destroyVideo() {
+        if (this.videoPlayer) {
+
+
+            this.is_stop = true
+            this.actioveSelf(false)
+            this.video_sp.spriteFrame = null
+            //this.videoPlayer.x = 2000;
+            this.pause()
+            console.warn('销毁了视频')
+            this.isReady = false;
+
+            this.videoPlayer.destroy()
+            this.videoPlayer.offCanplay(this.onCanplay)
+            this.videoPlayer.offError(this.videoError)
+            this.videoPlayer.offError(this.videoError)
+            this.videoPlayer.offEnded(this.videoEnd);
+            this.videoPlayer.offTimeUpdate(this.onUpdate)
+            this.videoPlayer.offPlay(this.onPlay)
+            this.videoPlayer.offPause(this.onPause)
+            this.videoPlayer = null
+
+        }
+    }
+
+    actioveSelf(show: boolean) {
+        this.video_sp.node.active = show
+    }
+
+    setSize(param: { x: number, y: number, width: number, height: number }) {
+        if (this.videoPlayer) {
+            var size = view.getVisibleSize();
+            var designResolutionSize = view.getDesignResolutionSize();
+            var ratio = size.width / designResolutionSize.width;
+            var width = param.width * ratio;
+            var height = param.height * ratio;
+            var x = param.x * ratio - width / 2;;
+            var y = param.y - size.height + param.height / 2 * ratio //* ratio// + param.height / 2 * ratio
+            this.video_sp_ut.node.position = new Vec3(x, y, 0);
+            this.video_sp_ut.contentSize = new Size(width, height);
+            console.error(param.y, size)
+        }
+    }
+
+    videoFit(param: { x: number, y: number, width: number, height: number }) {
+        if (this.videoPlayer) {
+            const size = view.getVisibleSize();
+            const designResolutionSize = view.getDesignResolutionSize();
+            const ratio = size.width / designResolutionSize.width;
+            const width = param.width * ratio;
+            const height = param.height * ratio;
+            const x = param.x * ratio - width / 2;
+            const y = param.y * ratio + param.height / 2 * ratio;
+            this.video_sp_ut.node.position = new Vec3(x, y, 0);
+            this.video_sp_ut.contentSize = new Size(width, height);
+        }
+    }
+
+    // 节点位置适配
+    autoSize() {
+        if (this.videoPlayer) {
+            let size = view.getVisibleSize();
+            if (this.param.isVideoFit) {
+                this.videoFit({ x: size.width / 2, y: -size.height / 2, width: 1080, height: 1920 });
+                return;
+            }
+            const designResolutionSize = view.getDesignResolutionSize()
+            const ratio = size.height / designResolutionSize.height
+
+            const width = size.width * ratio
+            const x = Math.abs(size.width - width) / 2
+            this.video_sp_ut.node.position = new Vec3(-x, 0, 0)
+            this.video_sp_ut.contentSize = new Size(width, size.height)
+        }
+    }
+
+}
+
+

package/assets/video/base/VideoPlayTT.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "624a16da-86f2-40dd-b167-a08a6dae88ef",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/video/base/VideoPlayWX.ts

@@ -0,0 +1,274 @@
+import { _decorator, assetManager, Component, Node, VideoClip, VideoPlayer, view } from 'cc';
+import { BaseVideo, IVideoParam } from './IVideo';
+const { ccclass, property } = _decorator;
+declare var wx: any;
+@ccclass('VideoPlayWX')
+export class VideoPlayWX extends BaseVideo {
+
+    onTimeUpdate: (data: { position: number, duration: number }) => void = null
+    pauseFinish: Function
+    onError: Function = null
+    onVideoEnd: Function = null
+    onRead: Function = null
+    data: { position: number, duration: number } = {
+        position: 0,
+        duration: 0
+    }
+    videoName: string = ""
+    videoPlayer: any
+    isPlaying: boolean = false
+    isReady: boolean = false;
+
+    getisPause() {
+        return !this.isPlaying
+    }
+    // node: Node;
+    taskId: string;
+    param: IVideoParam = {
+        isLoop: true,
+        isLocal: true,
+        isPlayTime: false,
+        isTargetSize: false
+    }
+    initParam: { bundle: string, dir: string }
+    remoteURL: string;
+    initVideo(initParam: { bundle: string, dir: string }) {
+        this.initParam = initParam
+        this.videoPlayer = this.createVideoWX("", true)
+
+    }
+    //创建视频地址(可能要做缓存处理)
+    public createVideoWX(remoteUrl: string, isloop: boolean = false) {
+        const self = this;
+        const windowInfo = wx.getWindowInfo();
+        const { windowWidth, windowHeight } = windowInfo;
+        let video = wx.createVideo({
+            // x: 0,
+            // y: 0,
+            // width: windowWidth,
+            // height: windowHeight,
+            //src: remoteUrl,
+            // objectFit: "cover",
+            // autoplay: true,
+            // loop: isLoop,
+            // controls: false,
+            // underGameView: true,
+            // //zIndex: -9999,//好大的坑 官方API根本没写这个
+            // showCenterPlayBtn: false,
+            // showProgress: false,
+            // showProgressInControlMode: false,
+            // enableProgressGesture: false,
+            x: 0,
+            y: 0,
+            src: remoteUrl,
+            loop: isloop,
+            width: windowWidth,
+            height: windowHeight,
+            controls: false,
+            showProgress: false,
+            showProgressInControlMode: false,
+            autoplay: true,
+            showCenterPlayBtn: false,
+            underGameView: true,
+            enableProgressGesture: false,
+            objectFit: "cover",
+            //zIndex: -9999,//好大的坑 官方API根本没写这个
+        });
+        video.onError(self.videoError.bind(self))
+        video.onEnded(self.videoEnd.bind(self));
+        video.onTimeUpdate(self.onUpdate.bind(self))
+        video.onPlay(self.onPlay.bind(self))
+        video.onPause(self.onPause.bind(self))
+        return video;
+    }
+
+    public async loadVideo(name: string, param: IVideoParam) {
+        this.videoName = name
+        this.param = param;
+        // const is_skip = name === (this.videoPlayer?.src ?? "");
+        // if (is_skip) {
+        //     return;
+        // }
+        //      this.destroyVideo();
+        this.isReady = false;
+        //    this.videoPlayer = this.createVideoWX(name, param.isLoop)
+        this.videoPlayer.hide = false;
+        this.videoPlayer.x = 0;
+        this.videoPlayer.src = name;
+        this.videoPlayer.loop = param.isLoop
+        const is_skip = name === this.remoteURL;
+
+        if (is_skip) {
+            this.isReady = true;
+            this.readyPlay()
+        } else {
+            this.play()
+        }
+        this.remoteURL = name;
+        if (!param.isTargetSize)
+            this.autoSize()
+    }
+
+    play(isloop?: boolean) {
+        if (isloop != undefined || isloop != null) {
+            this.videoPlayer.loop = isloop
+        }
+        this.videoPlayer.play();
+        this.isPlaying = true
+    }
+    async pause() {
+        super.pause();
+        this.isPlaying = false
+        return new Promise<void>((resolve, reject) => {
+            this.pauseFinish = resolve;
+            this.videoPlayer.pause();
+            console.log("暂停")
+        })
+    }
+    stop() {
+        this.videoPlayer.stop();
+        this.isPlaying = false
+        console.log("停止")
+
+    }
+    resume() {
+        this.videoPlayer.resume();
+        this.isPlaying = true
+    }
+
+    seek(time: number) {
+        this.videoPlayer.seek(time)
+    }
+
+    private videoEnd() {
+        //  if (!this.isloop) this.node.off(VideoPlayer.EventType.COMPLETED, this.videoEnd, this);
+        this.onVideoEnd?.();
+    }
+    private playIng() {
+        //  if (!this.isloop) this.node.off(VideoPlayer.EventType.PLAYING, this.playIng, this);
+        //this.isPlaying = true
+        //this.callReadBack && this.callReadBack()
+    }
+    private async readyPlay() {
+        this.videoPlayer.pause();
+        // if (!this.isloop) this.node.off(VideoPlayer.EventType.READY_TO_PLAY, this.readyPlay, this);
+        this.onRead?.(this)
+    }
+    private videoError() {
+        this.onError?.();
+    }
+    private onPlay() {
+        if (!this.isReady) {
+            this.readyPlay()
+        }
+        this.isReady = true;
+    }
+    onPause() {
+        if (this.pauseFinish) {
+            this.pauseFinish()
+            this.pauseFinish = null
+        }
+    }
+
+    protected onDestroy(): void {
+        this.destroyVideo()
+    }
+
+    protected onUpdate(data: any): void {
+        if (this.isPlaying && this.param.isPlayTime) {
+            this.onTimeUpdate?.(data)
+
+        }
+    }
+
+    async destroyVideo() {
+        if (this.videoPlayer) {
+            // this.videoPlayer.offEnded(this.videoEnd)
+            // this.videoPlayer.onTimeUpdate(this.onUpdate)
+            // this.videoPlayer.offError(this.videoError)
+            // this.videoPlayer.offPause(this.onPause)
+            // this.videoPlayer.offPlay(this.onPlay)
+            //this.videoPlayer.objectFit = "cover"
+            this.videoPlayer.hide = true
+            this.videoPlayer.x = 2000;
+            this.stop()
+            this.isReady = false;
+            console.error(this.videoPlayer)
+            //this.seek(0)
+            // this.videoPlayer.src = '';
+            //this.videoPlayer.destroy()
+            //this.videoPlayer = null
+        }
+    }
+
+    setSize(param: { x: number, y: number, width: number, height: number }) {
+        if (this.videoPlayer) {
+            // fill	填充，视频拉伸填满整个容器，不保证保持原有长宽比例
+            // contain	包含，保持原有长宽比例。保证视频尺寸一定可以在容器里面放得下。因此，可能会有部分空白
+            // cover	覆盖，保持原有长宽比例。保证视频尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，视频有部分会看不见
+            const windowInfo = wx.getWindowInfo();
+            const { windowWidth, windowHeight } = windowInfo;
+            const designResolutionSize = view.getDesignResolutionSize()
+
+            const ratio = windowWidth / designResolutionSize.width
+            const width = param.width * ratio
+            const height = param.height * ratio
+            const x = param.x * ratio - width / 2
+            const y = param.y * ratio + param.height / 2 * ratio;
+            this.videoPlayer.objectFit = "fill"
+            this.videoPlayer.x = x;
+            this.videoPlayer.y = windowHeight - y;
+            this.videoPlayer.width = width
+            this.videoPlayer.height = height
+            this.videoPlayer.underGameView = true;
+
+        }
+    }
+
+    videoFit(param: { x: number, y: number, width: number, height: number }) {
+        if (this.videoPlayer) {
+            const windowInfo = wx.getWindowInfo();
+            const { windowWidth, windowHeight } = windowInfo;
+            const designResolutionSize = view.getDesignResolutionSize()
+
+            const ratio = windowWidth / designResolutionSize.width
+            const width = param.width * ratio
+            const height = param.height * ratio
+            const x = param.x * ratio - width / 2
+            const y = param.y * ratio + param.height / 2 * ratio;
+            this.videoPlayer.objectFit = "contain"
+            this.videoPlayer.x = x;
+            this.videoPlayer.y = y;
+            this.videoPlayer.width = width
+            this.videoPlayer.height = height
+            this.videoPlayer.underGameView = true;
+        }
+    }
+
+    // 节点位置适配
+    autoSize() {
+        if (this.videoPlayer) {
+            const designResolutionSize = view.getDesignResolutionSize()
+            let windowInfo = wx.getWindowInfo();
+            if (this.param.isVideoFit) {
+                this.videoPlayer.objectFit = "contain";
+                this.videoPlayer.x = 0;
+                this.videoPlayer.y = 0;
+                this.videoPlayer.width = windowInfo.windowWidth;
+                this.videoPlayer.height = windowInfo.windowHeight;
+                return;
+            }
+
+            const { windowWidth, windowHeight } = windowInfo;
+            this.videoPlayer.objectFit = "cover"
+            this.videoPlayer.x = 0;
+            this.videoPlayer.y = 0;
+            this.videoPlayer.width = windowWidth
+            this.videoPlayer.height = windowHeight
+            this.videoPlayer.underGameView = true;
+        }
+    }
+
+}
+
+

package/assets/video/base/VideoPlayWX.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "807ce772-7243-4acf-8c65-f94b5a8ee868",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}