【更新】视频页添加播放按钮和第一屏图片，在视频无法自动播放时显示。

assets/main/SceneMain.ts

@@ -50,7 +50,6 @@ export default class Scene extends cc.Component {
         NotifierCenter.listen(CConst.EVENT_LJG_FINISH, this.showLgjFinish, this, false);
         NotifierCenter.listen(CConst.EVENT_ENTER_UNIT, this.msgResultEnterUnit, this, false);
         NotifierCenter.listen(CConst.EVENT_ENTER_GAME, this.msgResultEnterGame, this, false);
-        NotifierCenter.listen(CConst.EVENT_READY_TO_PLAY, this.msgResultReadyVideo, this, false);
     }
 
     /** 取消监听事件 */
@@ -115,16 +114,6 @@ export default class Scene extends cc.Component {
         if (isHas) {
             await AudioCB.instance.init();
             this.initUI();
-            // 用于判断视频是否可以自动播放
-            let node = new cc.Node();
-            node.setContentSize(cc.winSize);
-            node.on(cc.Node.EventType.TOUCH_START, () => {
-                common.isCanPlayVideo = true;
-                node.off(cc.Node.EventType.TOUCH_START);
-                node.removeFromParent();
-            });
-            node['_touchListener'].setSwallowTouches(false); // 不吞噬触摸事件
-            this.node.addChild(node, CConst.ZORDER_TOP);
 
             common.log("场景加载完成，等待进入游戏层");
             if (common.isDebug) {
@@ -230,20 +219,13 @@ export default class Scene extends cc.Component {
 
     /** 加载视频 先不去除游戏节点 */
     async addPrefabVideo(bundle, config) {
+        this.removePrefab();// 隐藏游戏页
         // 加载视频页
         let script = this.getScriptByNode(this.nodeVideo, config.scriptName);
         if (script && script.initBundle) {
             script.initBundle(bundle, config);
         }
-        this.nodeVideo.opacity = 0;
         this.nodeVideo.active = true;
-    }
-
-    /** 视频准备完成，去除游戏节点，显示视频 */
-    msgResultReadyVideo() {
-        this.removePrefab();// 隐藏游戏页
-
-        this.nodeVideo.opacity = 255;// 显示视频
         this.resetBtnNext(true);
     }
 

assets/res/videoPlayer/res/img.meta

@@ -0,0 +1,13 @@
+{
+  "ver": "1.1.3",
+  "uuid": "7b923456-99f6-4639-aaa9-5a2b4f6af4d6",
+  "importer": "folder",
+  "isBundle": false,
+  "bundleName": "",
+  "priority": 1,
+  "compressionType": {},
+  "optimizeHotUpdate": {},
+  "inlineSpriteFrames": {},
+  "isRemoteBundle": {},
+  "subMetas": {}
+}

assets/res/videoPlayer/res/img/bg.jpg.meta

@@ -0,0 +1,38 @@
+{
+  "ver": "2.3.7",
+  "uuid": "d417db94-2b79-4bda-97d5-c82be119f5b5",
+  "importer": "texture",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 2480,
+  "height": 1440,
+  "platformSettings": {},
+  "subMetas": {
+    "bg": {
+      "ver": "1.0.6",
+      "uuid": "7d07c1e2-73b5-410d-998f-dbe6f1cc8026",
+      "importer": "sprite-frame",
+      "rawTextureUuid": "d417db94-2b79-4bda-97d5-c82be119f5b5",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 2480,
+      "height": 1440,
+      "rawWidth": 2480,
+      "rawHeight": 1440,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

assets/res/videoPlayer/res/img/btn_replay.png.meta

@@ -0,0 +1,38 @@
+{
+  "ver": "2.3.7",
+  "uuid": "f5816476-5ed3-429e-a34c-3c210af60955",
+  "importer": "texture",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": true,
+  "genMipmaps": false,
+  "packable": true,
+  "width": 136,
+  "height": 136,
+  "platformSettings": {},
+  "subMetas": {
+    "btn_replay": {
+      "ver": "1.0.6",
+      "uuid": "5f2c5577-d78d-41c2-8c97-d684d9a40ff4",
+      "importer": "sprite-frame",
+      "rawTextureUuid": "f5816476-5ed3-429e-a34c-3c210af60955",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 0,
+      "offsetY": 0,
+      "trimX": 0,
+      "trimY": 0,
+      "width": 136,
+      "height": 136,
+      "rawWidth": 136,
+      "rawHeight": 136,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}

assets/res/videoPlayer/res/prefab/videoPlayer.prefab

@@ -19,19 +19,22 @@
     "_children": [
       {
         "__id__": 2
+      },
+      {
+        "__id__": 6
       }
     ],
     "_active": true,
     "_components": [
       {
-        "__id__": 6
+        "__id__": 18
       },
       {
-        "__id__": 7
+        "__id__": 19
       }
     ],
     "_prefab": {
-      "__id__": 8
+      "__id__": 20
     },
     "_opacity": 255,
     "_color": {
@@ -189,6 +192,444 @@
     "fileId": "aekCeLntBN77jEUVJFSXym",
     "sync": false
   },
+  {
+    "__type__": "cc.Node",
+    "_name": "nodeStart",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [
+      {
+        "__id__": 7
+      },
+      {
+        "__id__": 10
+      }
+    ],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 14
+      },
+      {
+        "__id__": 16
+      }
+    ],
+    "_prefab": {
+      "__id__": 17
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 1920,
+      "height": 1080
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        1,
+        1,
+        1,
+        1
+      ]
+    },
+    "_eulerAngles": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "_is3DNode": false,
+    "_groupIndex": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "bg",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 6
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 8
+      }
+    ],
+    "_prefab": {
+      "__id__": 9
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 2480,
+      "height": 1440
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        1,
+        1,
+        1,
+        1
+      ]
+    },
+    "_eulerAngles": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "_is3DNode": false,
+    "_groupIndex": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 7
+    },
+    "_enabled": true,
+    "_materials": [
+      {
+        "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
+      }
+    ],
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "7d07c1e2-73b5-410d-998f-dbe6f1cc8026"
+    },
+    "_type": 0,
+    "_sizeMode": 1,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "6937c4f4-77ad-4091-aac0-c5e69333a25d"
+    },
+    "fileId": "82Od8Zx/FBAa5ZprHbs/lB",
+    "sync": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "button",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 6
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 11
+      },
+      {
+        "__id__": 12
+      }
+    ],
+    "_prefab": {
+      "__id__": 13
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 250,
+      "height": 250
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        1,
+        1,
+        1,
+        1
+      ]
+    },
+    "_eulerAngles": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "_is3DNode": false,
+    "_groupIndex": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 10
+    },
+    "_enabled": true,
+    "_materials": [
+      {
+        "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
+      }
+    ],
+    "_srcBlendFactor": 1,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "5f2c5577-d78d-41c2-8c97-d684d9a40ff4"
+    },
+    "_type": 0,
+    "_sizeMode": 0,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 10
+    },
+    "_enabled": true,
+    "alignMode": 1,
+    "_target": null,
+    "_alignFlags": 18,
+    "_left": 0,
+    "_right": 0,
+    "_top": 0,
+    "_bottom": 0,
+    "_verticalCenter": 0,
+    "_horizontalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 0,
+    "_originalHeight": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "6937c4f4-77ad-4091-aac0-c5e69333a25d"
+    },
+    "fileId": "38NAYRKc9OBa39f6W1HN/x",
+    "sync": false
+  },
+  {
+    "__type__": "cc.Button",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 6
+    },
+    "_enabled": true,
+    "_normalMaterial": null,
+    "_grayMaterial": null,
+    "duration": 0.1,
+    "zoomScale": 1.2,
+    "clickEvents": [
+      {
+        "__id__": 15
+      }
+    ],
+    "_N$interactable": true,
+    "_N$enableAutoGrayEffect": false,
+    "_N$transition": 0,
+    "transition": 0,
+    "_N$normalColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_N$pressedColor": {
+      "__type__": "cc.Color",
+      "r": 211,
+      "g": 211,
+      "b": 211,
+      "a": 255
+    },
+    "pressedColor": {
+      "__type__": "cc.Color",
+      "r": 211,
+      "g": 211,
+      "b": 211,
+      "a": 255
+    },
+    "_N$hoverColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "hoverColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_N$disabledColor": {
+      "__type__": "cc.Color",
+      "r": 124,
+      "g": 124,
+      "b": 124,
+      "a": 255
+    },
+    "_N$normalSprite": null,
+    "_N$pressedSprite": null,
+    "pressedSprite": null,
+    "_N$hoverSprite": null,
+    "hoverSprite": null,
+    "_N$disabledSprite": null,
+    "_N$target": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.ClickEvent",
+    "target": {
+      "__id__": 1
+    },
+    "component": "",
+    "_componentId": "26869snX2RDWIrulrewQySM",
+    "handler": "eventTouch",
+    "customEventData": ""
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 6
+    },
+    "_enabled": true,
+    "alignMode": 1,
+    "_target": null,
+    "_alignFlags": 45,
+    "_left": 0,
+    "_right": 0,
+    "_top": 0,
+    "_bottom": 0,
+    "_verticalCenter": 0,
+    "_horizontalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 2480,
+    "_originalHeight": 1440,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "6937c4f4-77ad-4091-aac0-c5e69333a25d"
+    },
+    "fileId": "5bdzdfMDZJFINjcdytcP9T",
+    "sync": false
+  },
   {
     "__type__": "26869snX2RDWIrulrewQySM",
     "_name": "",
@@ -200,6 +641,9 @@
     "jsonConfig": null,
     "nodeCount": null,
     "prefabCount": null,
+    "nodeStart": {
+      "__id__": 6
+    },
     "video": {
       "__id__": 3
     },

assets/res/videoPlayer/src/VideoPlayer.ts

@@ -7,7 +7,6 @@
 
 import common, { AttributeUnit } from "../../../src/common/common";
 import CConst from "../../../src/common/CConst";
-import Loader from "../../../src/config/Loader";
 import NotifierCenter from "../../../src/webtcp/NotifierCenter";
 import GameBase from "../../../src/common/GameBase";
 
@@ -16,24 +15,19 @@ const { ccclass, property } = cc._decorator;
 @ccclass
 export default class VideoPlayer extends GameBase {
 
+    @property({ tooltip: '播放按钮', type: cc.Node })
+    nodeStart: cc.Node = null;
+
     @property({ tooltip: '视频资源', type: cc.VideoPlayer })
     video: cc.VideoPlayer = null;
 
-    /** 是否可以播放 */
-    isReadyToPlay = false;
-
-    protected onLoad(): void {
-        this.node.on(cc.Node.EventType.TOUCH_END, this.eventTouch, this, false);
-    }
-
     protected onEnable(): void {
-        this.isReadyToPlay = false;
+        this.nodeStart.active = true;
         this.loadVideo();
     }
 
     protected onDisable(): void {
-        this.isReadyToPlay = false;
-        this.video.stop();
+        this.stopVideo();
     }
 
     async loadVideo(){
@@ -46,25 +40,52 @@ export default class VideoPlayer extends GameBase {
 
     /** 事件-点击屏幕 */
     eventTouch(){
-        if (!this.isReadyToPlay) return;
-
-        if (!this.video.isPlaying()) {
-            this.video.play();
-        }
+        this.playVideo();
     }
 
     /** 事件-视频相关 */
     eventVideo(videoplayer: cc.VideoPlayer, event: cc.VideoPlayer.EventType, customEventData): void {
-        if(event === cc.VideoPlayer.EventType.READY_TO_PLAY){
-            this.isReadyToPlay = true;
-            if (common.isCanPlayVideo) {
-                this.video.play();
-            }
-            NotifierCenter.trigger(CConst.EVENT_READY_TO_PLAY, {});
+        common.log('视频：', this.getStatus(event), '; url: ', videoplayer.remoteURL);
+        if(event === cc.VideoPlayer.EventType.PLAYING){
+            this.nodeStart.active = false;
+        }
+        else if(event === cc.VideoPlayer.EventType.READY_TO_PLAY){
+            this.playVideo();
         }
         else if (event === cc.VideoPlayer.EventType.COMPLETED) {
             common.setGameToLocal();
             NotifierCenter.trigger(CConst.EVENT_ENTER_GAME, {});
         }
     }
+    
+    playVideo(){
+        if (!this.video.isPlaying()) {
+            this.video.play();
+        }
+    }
+
+    stopVideo(){
+        this.video.stop();
+    }
+
+    getStatus (event) { 
+        switch (event) { 
+            case cc.VideoPlayer.EventType.PLAYING: 
+                return 'PLAYING'; 
+            case cc.VideoPlayer.EventType.PAUSED: 
+                return 'PAUSED'; 
+            case cc.VideoPlayer.EventType.STOPPED: 
+                 return 'STOPPED'; 
+             case cc.VideoPlayer.EventType.COMPLETED: 
+                 return 'COMPLETED'; 
+             case cc.VideoPlayer.EventType.META_LOADED: 
+                 return 'META_LOADED'; 
+             case cc.VideoPlayer.EventType.CLICKED: 
+                 return 'CLICKED'; 
+             case cc.VideoPlayer.EventType.READY_TO_PLAY: 
+                 return 'READY_TO_PLAY'; 
+             default: 
+                 return 'NONE'; 
+         } 
+     }; 
 }