Render VideoPlayer inside UI component

Hi Team,

We have a requirement to render the sneak peek of video when an item is focused inside a list and video should start playing on that particular dimensions. We have tried out with video player but it is rendering outside the canvas as a separate video tag, and is being rendered at the top most part of the screen.

Any inputs on this would be helpful.

Hi Attaching the image for Reference:

We have tried using VideoTexture as well, but it plays in Web Browser but in Actual Device or RPI i doesn’t. The app is getting crashed.

First, note you have a canvas tag, which is everything Lightning is doing, and a video tag for video playback. These both exist in the HTML document. You need to move the video tag around on the screen. Make sure it is position: absolute and then you can change the x, y position to match the Lightning component which is focused (and the width + height if needed).

this._videoElement = document.getElementById('videoTag');
// Set these to match the x, y, w, h of the Lightning component = '0px'; = '0px'; = '0px'; = '0px';

If the video tag is behind the canvas (you can hear it playing but can’t see it) - you need to cut a hole in the canvas tag using the HoleShader (src/renderer/webgl/shaders/HoleShader.mjs).

On the App component:

shader: { type: HoleShader, x: 0, y: 0, w: 0, h: 0 }

Then you can change this.shader x,y,w,h values to match the Lightning component as well. You also need to turn on this.rtt = true when HoleShader is on.

LMK if you need any more info.

1 Like

Thanks for your response @chiefcll ,

But we need the player to be positioned inside the item of list component. It should automatically take the position of the focused item and render video inside that border.

We are able to do it using the videotexture in browser but when we test the same on RPI and other STB devices,video is not appearing and app crashes in a while without any error except webprocess failed

On RPI and other STB devices the video is always at the lowest layer ( you can’t change the zIndex of the video player :sob: ) - Because of this you need to position the player “inside” the focused item but setting the x, y coordinates and then cut a hole in it to see the video player.