实现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}`;
}
}
把它绑定到控制节点上,对应的引用属性都填好。
- 运行预览
看起来还不错