视频播放器总是在Cocos Creator的顶端？

Question

我正在开发一个游戏，我希望我的纹理图像保持在视频播放器的顶部，但目前视频播放器总是停留在所有视图的顶部？我正在使用CocosCreator框架和类型记录。

Answer 1

cc.game.container中添加了VideoPlayer、EditBox和WebView组件，因此这些组件将添加为最后一个子组件，这些组件将出现在顶部。

通过遵循这些步骤，您可以更改顺序或外观。

1. 如果你想在画布后面放一些像视频播放器一样的东西，并且想把其他组件放在它上面，那么首先你必须让你的帆布变得透明。您可以通过设置引擎文件"/engine/cocos2d/core/platform/CCMacro.js“的标志来做到这一点。

画布为真

1. 您需要在负责视频播放器的脚本开始时更改画布和视频组件类的ZOrder。

​

           start: function () { 
            cc.director.setClearColor(new cc.Color(0, 0, 0, 0))
            let videoElement = document.getElementsByClassName('cocosVideo')[0];
            videoElement.style.zIndex = 2;
            let gameCanvas = document.getElementsByClassName('gameCanvas')[0];
            gameCanvas.style.position = 'relative';
            gCanvas.style.zIndex = 4;
       },

​

3.这是在画布上播放视频的完整脚本。

​

cc.Class({
    extends: cc.Component,

    properties: {
        video:{
            default: null,
            type: cc.VideoPlayer
        }
    },

    // use this for initialization
    onLoad: function () {
        this.videoPlayer = this.node.getComponent(cc.VideoPlayer);
        this.videoPlayer.node.on('ready-to-play', this.callback, this);
    },
    
    start: function () { 
        cc.director.setClearColor(new cc.Color(0, 0, 0, 0))
        let videoElement = document.getElementsByClassName('cocosVideo')[0];
        videoElement.style.zIndex = 2;
    
        let gameCanvas = document.getElementsByClassName('gameCanvas')[0];
        gameCanvas.style.position = 'relative';
        gCanvas.style.zIndex = 4;
    },

    callback () {
        console.log("video ready to play")
        this.videoPlayer.play();
     },

    // called every frame
    update: function (dt) {

    },
});

​