[SOLVED] Use video texture on PlayCanvas UI element


#1

I’ve found a tutorial project which use the video texture as the material texture here:https://developer.playcanvas.com/en/tutorials/video-textures/
but I want to render the video on playcanvas ui element,is there any suggestion or a sample project?
Since I am not familiar with the html and css,it’s a little tricky for me to keep the ideal layout.


#2

I think indeed this is doable.

You will have to assign that custom texture to your UI image element. It accepts a textureAsset which will be an asset you can create manually in code based on your video texture:

https://developer.playcanvas.com/en/api/pc.ElementComponent.html#textureAsset

Though I’d say if you would like to render a video on the UI might be easier and more performant learning to do it in plain HTML and CSS.


#3

Thaks for yor reply:grinning:
I try to use: this.entity.element.textureAsset = this.videoTexture; but it doesn’t work.Am I missing something?here is my project:https://playcanvas.com/editor/scene/824405,hope you can give me some advice:joy:


#4

Your code from what I see is ok, try the following:

  • Drag and drop the VideoMat to your UI image element
  • Add the World layer to your image element layers property (normally you shouldn’t do that, but here it enables rendering of that material).


#5

I have not noticed that I can add the material to the UI element,It really helps,thanks a lot :grinning: