前言

一、UI設計

二、播放控制

新建VideoPlayerCtrl.js，掛載到Canvas節(jié)點上。

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. ?`});`

最后，設置響應事件，如下：