CocosCreator-VideoPlayer组件与UI组件

• 预览：
  • 　　<https://www.bilibili.com/video/BV1Qz411i71h?pop_share=1>
    

• 什么是VideoPlayer

  • 属性：

    • 

  • 方法：

    • 　　

  • 事件：

    • 　　
  • 事件回调参数
    • 　　

• 怎么用VideoPlayer

  • 比如用事件回调参数

    • 　　

      // 绑定到VideoPlayer- VideoPlayerEvent属性的回调   
      onVideoPlayerEvent(sender, event) {
        if (event === cc.VideoPlayer.EventType.COMPLETED) {
          // 若视频播完,do something...
        }
        else if (event === cc.VideoPlayer.EventType.CLICKED) {
          // 若点击了视频, do something...
          // 勾选了StayOnBottom后这个不能用
        } 
        else if (event === cc.VideoPlayer.EventType.PAUSED) {
          // 若视频暂停, do something...
        }
        //  ...
      }

• 怎么VideoPlayer+UI

  • 设置部分

    • 改引擎代码以允许摄像机背景色透明

      • 　　

    • 改摄像机背景色透明度

      • 　　

    • 改VP组件的属性，勾选stayOnBottom

      • 　　

      • 注：因为stayOnBottom = true，处于最底的VideoPlayer组件无法再监听点击事件

        • 解决方法：同级加位置和大小相同的全覆盖空节点，用以注册监听

  • 实现部分

    • 代码

      • 　　

        // Test.js
        
        cc.Class({
          extends: cc.Component,
        
          properties: {
            videoPlayer: cc.VideoPlayer,
            // get按钮节点以控制显/隐
            btnPlay: cc.Node,
            btnPause: cc.Node,
            // 时间文本
            timeLabel: cc.Label,
            // 切换按钮的文本
            switchLabel: cc.Label
          },
        
          // 组件属性自带事件监听的回调，设置StayOnBottom后cc.VideoPlayer.EventType.CLICKED(点击)事件不能用
          onVideoPlayerEvent(sender, event) {
            // 若视频播完
            if (event === cc.VideoPlayer.EventType.COMPLETED) {
              // 提示结束
              this.timeLabel.string = 'Time over, refresh in 3 scends';
              // 重置按钮
              this.changeButton(true, false);
              // 关闭update()方法
              this.enabled = false;
              // 延时执行刷新
              this.scheduleOnce(() => {
                this.onRefresh();
              }, 3);
            }
          },
        
          onPlay() {
            this.videoPlayer.play();
            // 隐藏开始按钮，显示暂停按钮
            this.changeButton(false, true);
          },
        
          onPause() {
            this.videoPlayer.pause();
            this.changeButton(true, false);
          },
        
          onRefresh() {
            this.videoPlayer.stop();
            this.enabled = true;
            this.changeButton(true, false);
          },
        
          switchType() {
            // 若点击切换按钮时为本地播放
            if (this.videoPlayer.resourceType === cc.VideoPlayer.ResourceType.LOCAL) {
              // 设置云端URL
              this.videoPlayer.remoteURL = 'https://www.w3school.com.cn/i/movie.mp4';
              // 改变资源类型
              this.videoPlayer.resourceType = cc.VideoPlayer.ResourceType.REMOTE;
              // 改变按钮文本
              this.switchLabel.string = '云端';
              // 重置启/停按钮
              this.changeButton(true, false);
            } else {
              this.videoPlayer.resourceType = cc.VideoPlayer.ResourceType.LOCAL;
              this.switchLabel.string = '本地';
              this.changeButton(true, false);
            }
          },
        
          /**
           * 切换按钮
           * @param {*} activePlay (bool) btnPlay.active
           * @param {*} activePause (bool) btnPause.active
           */
          changeButton(activePlay, activePause) {
            // 如果参数没传布尔值，报错
            if (!activePlay instanceof Boolean || !activePause instanceof Boolean) {
              cc.log('changeButton_参数类型错误');
            } else {
              this.btnPlay.active = activePlay;
              this.btnPause.active = activePause;
            }
          },
        
          update(dt) {
            // VideoPlayer.currentTime(Number) 指定视频从什么时间点开始播放，单位是秒，也可以用来获取当前视频播放的时间进度
            // VideoPlayer.getDuration 获取视频文件的播放总时长
            if (this.videoPlayer.currentTime >= 0) {
              // 每帧更新时间统计信息
              let currentTime = this.videoPlayer.currentTime.toFixed(1);
              let videoDuration = this.videoPlayer.getDuration().toFixed(1);
              this.timeLabel.string = 'Time: ' + currentTime + ' / ' + videoDuration;
            }
          },
        });