@cc-component/cc-ex-component 1.0.2 → 1.0.3

package/assets/video/VideoPlayWeb.ts

@@ -0,0 +1,228 @@
+import { _decorator, assetManager, Component, Node, Size, UITransform, VideoClip, VideoPlayer, view } from 'cc';
+import { BaseVideo, IVideoParam } from './IVideo';
+import { v3 } from 'cc';
+import { sys } from 'cc';
+const { ccclass, property } = _decorator;
+
+@ccclass('VideoPlayWeb')
+export class VideoPlayWeb extends BaseVideo {
+
+    onTimeUpdate: (data: { position: number, duration: number }) => void = null
+    onError: Function = null
+    onVideoEnd: Function = null
+    onRead: Function = null
+    data: { position: number, duration: number } = {
+        position: 0,
+        duration: 0
+    }
+    videoName: string = ""
+    videoPlayer: VideoPlayer
+    isPlaying: boolean = false
+
+    // node: Node;
+    taskId: string;
+    param: IVideoParam = {
+        isLoop: true,
+        isLocal: true,
+        isPlayTime: false,
+        isTargetSize: false
+    }
+    initParam: { bundle: string, dir: string }
+    nodeUT: UITransform;
+    isReady: boolean = false;
+
+    old_x = 0
+    getisPause() {
+        return !this.isPlaying
+    }
+    initVideo(initParam: { bundle: string, dir: string }) {
+        this.initParam = initParam
+        // this.node = node;
+        const node = this.node;
+        this.old_x = node.position.x
+        this.nodeUT = this.node.getComponent(UITransform);
+        let comp = node.addComponent(VideoPlayer);
+        this.videoPlayer = comp
+        comp.enabled = true
+        //  node.on(VideoPlayer.EventType.READY_TO_PLAY, this.readyPlay, this);
+        node.on(VideoPlayer.EventType.PLAYING, this.playIng.bind(this), this);
+        node.on(VideoPlayer.EventType.COMPLETED, this.videoEnd.bind(this), this);
+        node.on(VideoPlayer.EventType.ERROR, this.videoError.bind(this), this);
+
+        comp.resourceType = VideoPlayer.ResourceType.REMOTE;
+        comp.stayOnBottom = true;
+        comp.playOnAwake = true;
+        comp.currentTime = 0;
+        comp.volume = 1;
+        comp.mute = true;
+        comp.keepAspectRatio = false;
+        //comp.fullScreenOnAwake = true;
+        comp.loop = true;
+        comp.fullScreenOnAwake = false;
+    }
+
+    public loadVideo(name: string, param: IVideoParam) {
+        this.param = param;
+        // this.videoPlayer.fullScreenOnAwake = false;
+        //this.play()
+
+        this.isReady = false;
+        if (param.isLocal) {
+            this.videoPlayer.resourceType = VideoPlayer.ResourceType.LOCAL;
+            //this.videoPlayer.clip = assetManager.getBundle(this.initParam.bundle).get(`${this.initParam.dir}/${name}`, VideoClip);
+            assetManager.getBundle(this.initParam.bundle).load(`${this.initParam.dir}/${name}`, VideoClip, (err, clip) => {
+                if (err) {
+                    console.error('视频加载失败：');
+                    return;
+                }
+                this.activeVideo(true)
+                if (!param.isTargetSize)
+                    this.autoSize()
+                this.videoPlayer.clip = clip;
+                //this.videoPlayer.remoteURL = "";
+                this.videoPlayer.loop = param.isLoop
+                const is_skip = name === this.videoName;
+                //console.warn('暂停', is_skip)
+
+                if (is_skip) {
+                    this.isReady = true;
+                    this.readyPlay()
+                } else {
+                    //this.pause();
+                }
+                this.videoName = name
+            });
+        } else {
+            this.activeVideo(true)
+            if (!param.isTargetSize)
+                this.autoSize()
+            const is_skip = name === this.videoPlayer.remoteURL;
+            this.videoPlayer.remoteURL = name;
+            this.videoPlayer.resourceType = VideoPlayer.ResourceType.REMOTE;
+            //console.warn('暂停', is_skip)
+            if (is_skip) {
+                this.isReady = true;
+                this.readyPlay()
+            } else {
+                this.play()
+                //this.pause();
+            }
+        }
+    }
+
+    play(isloop?: boolean) {
+        if (isloop != undefined || isloop != null) {
+            this.videoPlayer.loop = isloop
+        }
+        //console.warn("播放2")
+        this.videoPlayer.play();
+        // this.videoPlayer.resume();
+        this.isPlaying = true
+    }
+    async pause() {
+        this.videoPlayer.pause();
+        this.isPlaying = false
+        console.log("暂停")
+
+    }
+    stop() {
+        this.videoPlayer.stop();
+        this.isPlaying = false
+        console.log("停止")
+
+    }
+    resume() {
+        this.videoPlayer.resume();
+        this.isPlaying = true
+    }
+
+    seek(time: number) {
+        this.videoPlayer.currentTime = time
+    }
+
+    private videoEnd() {
+        //  if (!this.isloop) this.node.off(VideoPlayer.EventType.COMPLETED, this.videoEnd, this);
+        this.onVideoEnd?.();
+    }
+    private playIng() {
+        if (!this.isReady) {
+            this.readyPlay()
+        }
+        this.isReady = true;
+    }
+    private readyPlay() {
+        this.videoPlayer.pause()
+        this.isPlaying = false;
+
+        // if (!this.isloop) this.node.off(VideoPlayer.EventType.READY_TO_PLAY, this.readyPlay, this);
+        this.onRead?.(this)
+    }
+    private videoError() {
+        this.onError?.();
+    }
+
+    protected onDestroy(): void {
+        this.node.off(VideoPlayer.EventType.ERROR, this.videoError, this)
+        this.node.off(VideoPlayer.EventType.PLAYING, this.playIng, this)
+        this.node.off(VideoPlayer.EventType.COMPLETED, this.videoEnd, this)
+        // this.node.off(VideoPlayer.EventType.READY_TO_PLAY, this.readyPlay, this)
+    }
+
+    protected update(dt: number): void {
+        if (this.isPlaying && this.param.isPlayTime) {
+            this.data.position = this.videoPlayer.currentTime;
+            this.data.duration = this.videoPlayer.duration;
+            this.onTimeUpdate?.(this.data)
+        }
+    }
+
+    async destroyVideo() {
+        if (this.videoPlayer) {
+            this.activeVideo(false)
+            this.stop()
+            this.isReady = false;
+        }
+    }
+    activeVideo(isActive: boolean) {
+        if (sys.platform === sys.Platform.DESKTOP_BROWSER) {
+            this.videoPlayer.node.active = isActive
+        } else {
+            this.videoPlayer.node.position = v3(isActive ? this.old_x : 10000, 0, 0)
+        }
+    }
+    setSize(param: { x: number, y: number, width: number, height: number }) {
+        if (this.videoPlayer) {
+            this.nodeUT.contentSize = new Size(param.width, param.height)
+            this.node.setWorldPosition(param.x - param.width / 2, param.y + param.height / 2, 0)
+        }
+    }
+    // 节点位置适配
+    autoSize() {
+        //const size = { width: 1080, height: 1920 }
+        let screenSize = view.getVisibleSize(); // 获取当前屏幕尺寸
+        if (this.param.isFullNot) {
+            screenSize = new Size(1080, 1920)
+        }
+        const designResolutionSize = view.getDesignResolutionSize()
+        const w = screenSize.width / designResolutionSize.width
+        const h = screenSize.height / designResolutionSize.height
+
+        // 根据屏幕宽高调整目标节点的位置
+        const ratio = h
+        const width = designResolutionSize.width * ratio
+        const height = designResolutionSize.height * ratio
+        const width_w = screenSize.width - width;
+        const height_h = screenSize.height - view.getVisibleSize().height;
+
+        const x = width_w / 2
+        let y = 0//-height / 4
+        if (this.param.isFullNot) {
+            y = height_h / 2
+        }
+
+        this.nodeUT.contentSize = new Size(width, height)
+        this.node.setPosition(x, y, 0)
+    }
+}
+
+

package/assets/video/VideoPlayWeb.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "4ab3af68-7ee8-4fb6-9a1a-fcb57d426e3d",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/video/list.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "c4221e61-65e7-45ad-b33a-ab1ee494586c",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/assets/video.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "3741d2b3-cfcc-4207-8ae0-5ed87dc637e6",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package/index.ts

@@ -1,2 +1,2 @@
 // 负责导出assets下的模块，如: export { default } from './assets/xxx.ts'
-export { } from './assets/BaseEx';
+// export {  } from './assets/BaseEx';

package/index.ts.meta

@@ -1,5 +1,5 @@
 {
-  "ver": "4.0.23",
+  "ver": "4.0.24",
   "importer": "typescript",
   "imported": true,
   "uuid": "0649bb79-0fd1-45d2-ba6b-56ece4f941f0",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cc-component/cc-ex-component",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "engine": ">=3.8.0",
     "description": "系统组件添加常用扩展方法",
     "main": "index.ts",

package/package.json.meta

@@ -1,5 +1,5 @@
 {
-  "ver": "2.0.0",
+  "ver": "2.0.1",
   "importer": "json",
   "imported": true,
   "uuid": "cdfc94f9-bb5a-4211-ab24-e5799614c31a",