视频播放器在 Cocos Creator 中总是排在首位？答案

【问题标题】：Video Player always stay at the top in Cocos Creator?视频播放器在 Cocos Creator 中总是排在首位？
【发布时间】：2019-11-27 07:13:32
【问题描述】：

我正在开发一款游戏，我希望我的纹理图像保持在视频播放器的顶部，但目前视频播放器始终保持在所有视图的顶部？我正在使用 CocosCreator 框架和打字稿。

【问题讨论】：

你能分享到目前为止你尝试了什么吗？

标签： cocoscreator

【解决方案1】：

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

按照这些步骤，您可以更改顺序或外观。

如果您想在画布后面放置视频播放器之类的东西并想要把其他组件放在它上面，所以首先你必须让你的画布透明。您可以通过设置引擎文件的标志“/engine/cocos2d/core/platform/CCMacro.js”

Change the flag ENABLE_TRANSPARENT_CANVAS to true

您需要在负责视频播放器的脚本的开头更改画布和视频组件类的 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) {

    },
});

【讨论】：