Cocos Creator如何在游戏中播放用户教程视频
前言
一、UI设计
二、播放控制
新建VideoPlayerCtrl.js，挂载到Canvas节点上。
1.
`const i18n = require('i18n');`
2. `const TipsManager = require('TipsManager');`
3. `function getStatus (event) {`
4. ` switch (event) {`
5. ` case cc.VideoPlayer.EventType.PLAYING:`
6. ` return 'PLAYING';`
7. ` case cc.VideoPlayer.EventType.PAUSED:`
8. ` return 'PAUSED';`
9. ` case cc.VideoPlayer.EventType.STOPPED:`
10. ` return 'STOPPED';`
11. ` case cc.VideoPlayer.EventType.COMPLETED:`
12. ` return 'COMPLETED';`
13. ` case cc.VideoPlayer.EventType.META_LOADED:`
14. ` return 'META_LOADED';`
15. ` case cc.VideoPlayer.EventType.CLICKED:`
16. ` return 'CLICKED';`
17. ` case cc.VideoPlayer.EventType.READY_TO_PLAY:`
18. ` return 'READY_TO_PLAY';`
19. ` default:`
20. ` return 'NONE';`
21. ` }`
22. `};`
23. `cc.Class({`
1. ` extends: cc.Component,`
2. ` properties: {`
3. ` videoPlayer: cc.VideoPlayer,`
4. ` statusLabel: cc.Label,`
5. ` currentTime: cc.Label,`
6. ` resSwitchBtnLabel: cc.Label,`
7. ` controlButtons: cc.Node,`
8. ` keep_Ratio_Switch: cc.Node,`
9. ` playVideoArea: cc.Node,`
10. ` visibility: cc.Label,`
11. `},`
12. ` start () {`
13. ` TipsManager.init();`
14. ` this.controlButtons.active = false;`
15. ` this.keep_Ratio_Switch.active = !(cc.sys.isBrowser ||
cc.sys.platform === cc.sys.WECHAT_GAME);`
16. ` this.playVideoArea.on('touchend', () => {`
17. ` this.videoPlayer.play();`
18. ` });`
19. `},`
20. ` onVideoPlayerEvent (sender, event) {`
21. ` this.statusLabel.string = 'Status: ' + getStatus(event);`
22. ` if (event === cc.VideoPlayer.EventType.CLICKED) {`
23. ` if (this.videoPlayer.isPlaying()) {`
24. ` this.videoPlayer.pause();`
25. ` } else {`
26. ` this.videoPlayer.play();`
27. ` }`
28. ` }`
29. ` else if (event === cc.VideoPlayer.EventType.READY_TO_PLAY
|| event === cc.VideoPlayer.EventType.META_LOADED) {`
30. ` this.controlButtons.active = true;`
31. ` this.playVideoArea.active = true;`
32. ` }`
33. ` else if (event === cc.VideoPlayer.EventType.PLAYING) {`
34. ` this.playVideoArea.active = false;`
35. ` }`
36. `},`
1. ` toggleFullscreen () {`
2. ` if (`
3. ` cc.sys.isBrowser &&`
4. ` cc.sys.browserType === cc.sys.BROWSER_TYPE_MOBILE_QQ
&&`
5. ` cc.sys.browserVersion <= 7.2 &&`
6. ` /Nexus 6/.test(navigator.userAgent)`
7. ` ) {`
8. `
TipsManager.createTips(i18n.t('cases/02_ui/09_videoplayer/videoPlayer.nonsupport_fullscreen'));`
9. ` return cc.log('May be crash, so prohibit full
screen');`
10. ` }`
11. ` this.videoPlayer.isFullscreen = true;`
12. `},`
13. ` toggleVisibility (event) {`
14. ` this.videoPlayer.node.active =
!this.videoPlayer.node.active;`
15. ` this.playVideoArea.active = this.videoPlayer.node.active;`
16. ` this.visibility.string = 'Visibility: ' +
this.videoPlayer.node.active;`
17. `},`
18. ` keepRatioSwitch () {`
19. ` this.videoPlayer.keepAspectRatio =
!this.videoPlayer.keepAspectRatio;`
20. `},`
21. ` switchOnlineVideo () {`
22. ` this.videoPlayer.remoteURL =
'https://www.w3school.com.cn/i/movie.mp4';`
23. ` this.videoPlayer.resourceType =
cc.VideoPlayer.ResourceType.REMOTE;`
24. ` this.playVideoArea.active = true;`
25. `},`
26. ` switchLoaclVide () {`
27. ` this.videoPlayer.resourceType =
cc.VideoPlayer.ResourceType.LOCAL;`
28. ` this.playVideoArea.active = true;`
29. `},`
30. ` play () {`
31. ` this.videoPlayer.play();`
32. ` this.playVideoArea.active = false;`
33. `},`
1. ` pause () {`
2. ` this.videoPlayer.pause();`
3. `},`
4. ` stop () {`
5. ` this.videoPlayer.stop();`
6. `},`
7. ` update () {`
8. ` if (this.currentTime &&
this.videoPlayer.currentTime >= 0) {`
9. ` this.currentTime.string =
this.videoPlayer.currentTime.toFixed(2) + ' / ' +
this.videoPlayer.getDuration().toFixed(2);`
10. ` }`
11. ` }`
12. `});`
最后，设置响应事件，如下：
