Cocos Creator – Creating a video player

1. Create a new scene
2. Right click on the main camera and create a node with video player under create UI nodes
3. Similarly create a node with button under create UI nodes
4. Rename the button and label as show in the below image
5. Import a demo video in .mp4 format
6. Select the video player node under the main camera on Node tree and under the video player option of video player node change the resource type to local.
7. Now drag the imported video from assets to Clip under video player.
8. Create a new Js file called as PlayerController.js and copy the below code to it
9. cc.Class({
   extends: cc.Component,properties: {
   videoPlayer: {
   default: null,
   type: cc.VideoPlayer
   },playBtn:{
   default: null,
   type: cc.Node
   },
   pauseBtn:{
   default: null,
   type: cc.Node
   },
   stopBtn:{
   default: null,
   type: cc.Node
   },

},
start()
{

},
play ()
{
this.videoPlayer.play();

},

pause () {
this.videoPlayer.pause();

},

toggleFullscreen () {
if (
cc.sys.isBrowser &&
cc.sys.browserType === cc.sys.BROWSER_TYPE_MOBILE_QQ &&
cc.sys.browserVersion <= 7.2 &&
/Nexus 6/.test(navigator.userAgent)
) {
// this.tips.textKey = ‘cases/02_ui/09_videoplayer/videoPlayer.nonsupport_fullscreen’;
return cc.log(‘May be crash, so prohibit full screen’);
}
this.videoPlayer.isFullscreen = true;
},

stop () {
this.videoPlayer.stop();
},

keepRatioSwitch () {
this.videoPlayer.keepAspectRatio = !this.videoPlayer.keepAspectRatio;
},

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’;
}
},

onVideoPlayerEvent (sender, event)
{
// this.statusLabel.string = this.getStatus(event);
if (event === cc.VideoPlayer.EventType.META_LOADED)
{
var duration = this.videoPlayer.getDuration();
if (duration) {
// this.totalTime.string = duration.toFixed(2);
}
else {
//this.totalTime.string = 0;
}
}
else if (event === cc.VideoPlayer.EventType.CLICKED)
{
if (this.videoPlayer.isPlaying())
{
this.videoPlayer.pause();

} else {
this.videoPlayer.play();

}
}
},

toggleVisibility () {
this.videoPlayer.enabled = !this.videoPlayer.enabled;
},

playOnlineVideo () {
this.videoPlayer.resourceType = cc.VideoPlayer.ResourceType.REMOTE;
this.videoPlayer.remoteURL = ‘http://benchmark.cocos2d-x.org/cocosvideo.mp4&#8217;;
this.videoPlayer.play();
},

playLocalVideo () {
this.videoPlayer.resourceType = cc.VideoPlayer.ResourceType.LOCAL;
this.videoPlayer.play();
},

update () {
if (this.currentTime && this.videoPlayer.currentTime) {
this.currentTime.string = this.videoPlayer.currentTime.toFixed(2);
}
},

});

10. Create an empty node under Node tree as VideoPlayerCtrl

11. Attach the imported script on the VideoPlayerCtrl node by just dragging over the script onto the properties of created node.

12. Now select the VideoPlayerCtrl node and under properties assign the node from node tree by dragging as show in the below pic.

13. Now select the play button and add a click event and then under the click event drag and drop the VideoPlayerCtrl node and then under the first drop down select the playerController and under the second drop down select the play method.

14. Similarly repeat the steps for stop and pause button and select playerController on first drop down and stop and pause methods respectively on the second drop downs.

15. That’s it.