Cocos实例2：实现VideoPlayer奥利奥夹心饼干

实现VideoPlayer奥利奥夹心饼干

在CocosCreator中，VideoPlayer 支持的视频格式为 mp4，所以在需要使用到VideoPlayer组件时，确保视频资源是正确的编码和格式。另外不同平台对于 VideoPlayer 组件的授权、API都不同，并没有形成统一的标准，Creator中的VideoPlayer组件目前只支持 Web、iOS、Android。该实例以Web平台为例子。Creator版本为3.6.3。

如何实现VideoPlayer夹心饼干

因为VideoPlayer 组件独特渲染机制的限制，在CocosCreator中默认是显示在canvas的上层，引擎也提供了设置Video在canvas下层的方式，以官方文档中所提供的方法，VideoPlayer只能显示在最上层或最下层，没法做夹心饼干。例如想要把视频放在一个UI背景上，在视频的上方也要有可以交互的UI按钮等。于是想了一种方法：结合Mask组件实现该效果。

• 原理：
  1.设置VideoPlayer在最下层显示;
  2.添加背景，结合Mask组件在该背景上 “挖出” 一个刚好能显示VideoPlayer的洞；
  3.添加可以交互的UI
• 实例
  • 准备资源
    1.一张背景图片
    2.一个Mp4文件
  • 搭建UI
    
    大致如上图。
    接下来挖个洞来显示视频，创建一个反向遮罩，把上面搭建的UI节点们放在遮罩下面
    

另外还需要注意一点：除了勾选“stayOnBottom”，还需要在Creator的 项目设置 -> 宏配置中勾选 ENABLE_TRANSPARENT_CANVAS

如果不设置Canvas透明支持，即使视频包含透明区域，这部分也会被Canvas的不透明背景色填充，导致看不到视频。
搭建UI就到这里，接下来要实现预览界面中，视频刚好显示在空白的广告牌中，功能按钮点击可以控制视频播放。
- 编写脚本VideoCtrl.ts

import { _decorator, Component, Label, Node, Slider, VideoPlayer } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('VideoCtrl')
export class VideoCtrl extends Component {
    // 定义一个VideoPlayer类型的属性，名称为test_video，初始值为null
    @property(VideoPlayer)
    test_video: VideoPlayer = null;
    // 定义一个Label类型的属性，名称为rate_Label，初始值为null
    @property(Label)
    rate_Label:Label = null;

    // 定义一个私有变量，名称为_playRate，初始值为1
    _playRate:number = 1;
    // 定义一个点击播放的方法
    onClickPlay(){
        // 调用test_video的play方法
        this.test_video.play();
    }
    // 定义一个点击暂停的方法
    onClickPause(){
        // 调用test_video的pause方法
        this.test_video.pause();
    }
    // 定义一个点击重新开始的方法
    onClickResume(){
        // 调用test_video的resume方法
        this.test_video.resume();
    }

    // 定义一个滑动改变的方法
    onSlideChange(slider: Slider){
        // 调用test_video的currentTime方法，传入slider的progress乘以test_video的duration
        this.test_video.currentTime = slider.progress * this.test_video.duration;
    }
    // 定义一个改变播放速率的方法
    onChangeRate () {
        // 将_playRate加1，如果大于等于3，则重置为1，然后调用test_video的playbackRate方法，传入_playRate，最后调用rate_Label的string方法，传入_playRate的值
        this._playRate = this._playRate++ >= 3 ? 1 : this._playRate;
        this.test_video.playbackRate = this._playRate;
        this.rate_Label.string = `x${this._playRate}`;
    }
}

把它绑定到控制节点上，对应的引用属性都填好。

• 运行预览

	看起来还不错