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
this._videoElement.style.top = '0px';
this._videoElement.style.left = '0px';
this._videoElement.style.width = '0px';
this._videoElement.style.height = '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.
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 
) - 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.
For future reference, I have created a code example on how this can be done.
It can be found here: GitHub - mlapps/video-thumbnail-example
Hi @mauro1855 ,
Thank you for the working example, we have implemented and it is working fine.
we have a feature where we have to render the video on a large card item, in which the video should come in the full width and height of the card, it is working fine with object-fit : fill attribute in browser but in RPi and other STB(Skyworth) we are unable to fit the video to full size as per our requirements. Attaching sample screenshot for reference.
But @Sharan, in that case the video will be stretched. Is that what you want? Wouldn’t it make more sense to crop the video to fit the card without stretching it?
There are multiple cases,in this case the video should fill in the card layout,i think its fine if its strectched also,as i have cross checked in other platforms as well its the same use case
Hi @Sharan,
I discussed with the team, and it seems that it’s not possible - the devices won’t render the video stretched.
A potential alternative would be to use “textureMode” as then the video is rendered in a Lightning texture which could be stretched (as you had previously in the code example you sent me), but this feature is not often used and “your mileage may vary.” There is also a reported issue for the “textureMode” that I believe you are aware.
@mauro1855 texture mode indeed offers more options (and would allow you to do things like stretching). However texture mode is normally not supported on STBs, since it’s usually not allowed to capture the video stream.
It does work on the RPi, and that’s where it’s often used for demo purposes.
@Sharan please be aware of the above observations when implementing this, and understand that textureMode probably doesn’t work in production.
Since the video cannot be stretched and textureMode might not work in production devices as indicated by @michiel , maybe the best solution here is to zoom the video (i.e. increase the size() of the player) until it occupies the full thumbnail border.
In the above case we are giving the size of the player as the size of the thumbnail,do you suggest us to increase the size more and check?
@Sharan,
Yes, but this is just another alternative. You should discuss with your team to see if it addresses your particular use case.
