HTML5 video playback

General Discussion
1

Hi All,

I am using HTML5 player to show the preview of the whole movie in the lightning application. In the browser, I am getting the playback on top of all the screens developed. But, when I tested the same application on RPI and STB, the same HTML5 video playback is happening behind the UI.

I had tried assigning the higher zIndex value to player but still not able to get the html5 video playback on top of the UI.

Can anyone please help me with this?

2

I wish the answer was simpler… I know we had to solve this by cutting a hole in the canvas tag to allow the video to show through cause zIndex didn’t work. I also assume you can’t display none on the canvas tag?

3

You can also check out the videoPlayer from the SDK

4

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.