VideoPlayer over canvas

Is there any way to put content (like an sprite) over a videoPlayer?

1 Like

videoPlayer is used system component, it is over the canvas, so you should customized the engine to implement it
this forum will be helpful: https://forum.cocos.com/t/topic/68397/16?u=bigbear

1 Like

I asume that this can only be archieved when not using WebGL because of the black background, right?
The way to disable WebGL is turning off “WebGL Renderer” in Project Settings?
Am I missing something?

OK
I’ve figured out how to make the background canvas transparent thanks to this: https://forum.cocos.com/t/creator-canvas/55373/12
In the preview-templates/boot.js:

var option = {
        id: canvas,
        scenes: _CCSettings.scenes,
        debugMode: parseInt(optsDebugMode.value),
        showFPS: Array.prototype.indexOf.call(btnShowFPS.classList, 'checked') !== -1,
        frameRate: parseInt(inputSetFPS.value),
        groupList: _CCSettings.groupList,
        collisionMatrix: _CCSettings.collisionMatrix,
        jsList: jsList
        // rawUrl: _CCSettings.rawUrl
    };

    cc.macro.ENABLE_TRANSPARENT_CANVAS = true;  // Transparent background
    canvas.getContext("webgl", {    // Transparent background
        premultipliedAlpha: false
    })
    cc.game.run(option, function () {
        cc.director.setClearColor(new cc.Color(0,0,0, 0));   // Transparent background
    ...

In the preview-templates/style.css:

.wrapper {

background-color: transparent;

Finally, in an script on the start() function:

    let video0 = document.getElementsByClassName('cocosVideo')[0];
    video0.style.zIndex = 5;

    let gCanvas = document.getElementsByClassName('gameCanvas')[0];
    gCanvas.style.position = 'relative';
    gCanvas.style.zIndex = 10;
1 Like

I’m trying to use a mask for making a “hole” where the video should be but its not working.
Any suggestions?


As you can see, the red square is being completly hidded behind the mask.

I’ve found a way to handle this…
Had to rebuild the engine changing:
cocos2d/core/renderer/render-engine.js:

opts = opts || {};
  if (opts.alpha === undefined) {
    opts.alpha = false;
  }
  if (opts.stencil === undefined) {
    opts.stencil = true;
  }
  if (opts.depth === undefined) {
    opts.depth = true;
  }
  if (opts.antialias === undefined) {
    opts.antialias = false;
  }

  opts.premultipliedAlpha = false;  // Transparent background

Am I breaking something doing this?

like @Big_Bear said. The Video element is on top of the element in the HTML structure. So no matter what you do in the inside cocos it will always be above in the HTML structure. Use Chrome with translate to read the Chinese forums. You need to customize the Cocos engine most likely to get it working.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.