首先在资源管理器中放入新建一个文件夹‘video’,然后放入我们的视频资源。
我们尝试直接将视频拖拽到场景中,会有报错。(不可将视频直接拖拽)
我们应该选择一个适当的控件,作为容器来存放我们的视频资源。
在属性检查器中,添加VideoPlayer组件并添加本地的视频资源。
然后按照官网的来做,使用js脚本来控制视频的播放。(不然不会自动播放)
资源中添加videoPlay.js
通过 videoplayer.node.on('ready-to-play', ...) 的方式来添加
//假设我们在一个组件的 onLoad 方法里面添加事件处理回调,在 callback 函数中进行事件处理:
cc.Class({
extends: cc.Component,
properties: {
videoplayer: cc.VideoPlayer
},
onLoad: function () {
//判断是否加载完毕,如果加载完毕启动call函数
this.videoplayer.node.on('ready-to-play', this.callback, this);
},
callback: function (event) {
//这里的 event 是一个 EventCustom 对象,你可以通过 event.detail 获取 VideoPlayer 组件
var videoplayer = event.detail;
if (this.videoplayer) {
this.videoplayer._syncVolume();
this.videoplayer.play();//加载完毕后播放
}
//do whatever you want with videoplayer
//另外,注意这种方式注册的事件,也无法传递 customEventData
}
});
然后在控件上添加这个javaScript用户组件。
并将控件拖拽到组件的这个参数里面。
视频的自动播放就算完事了。
下面的是循环播放(即判断是否播放完毕,并再次播放就可以了)videoPlay.js
cc.Class({
extends: cc.Component,
properties: {
videoplayer: cc.VideoPlayer
},
onLoad: function () {
console.log(this.videoplayer.node)
this.videoplayer.node.on('ready-to-play', this.callback, this);
//监听视频是否播放完毕,如果播放完毕再次播放
this.videoplayer.node.on('completed', this.callback1, this);
//视频的宽度高度自适应
let windowSize=cc.view.getVisibleSize();
cc.log("width="+windowSize.width+",height="+windowSize.height);
windowSize=cc.winSize;//推荐 原因 短
cc.log("width="+windowSize.width+",height="+windowSize.height)
console.log("orientation=",cc.view)
this.videoplayer.height=windowSize.height;
},
callback1: function (event) {
console.log('结束了')
this.videoplayer.play();//再次播放
},
onStopped () {
cc.Component.EventHandler.emitEvents(this.videoPlayerEvent, this, EventType.STOPPED);
this.node.emit('stopped', this);
},
callback: function (event) {
//这里的 event 是一个 EventCustom 对象,你可以通过 event.detail 获取 VideoPlayer 组件
var videoplayer = event.detail;
console.log(this._impl)
if (this.videoplayer) {
this.videoplayer._syncVolume();
this.videoplayer.play();
}
//do whatever you want with videoplayer
//另外,注意这种方式注册的事件,也无法传递 customEventData
},
play () {
},
});
关于视频其余的事件绑定就看官方文档就好了,以上demo仅供参考。