[SOLVED] Videos on planes

apologies if this question’s already been asked before. i can’t seem to find a good tutorial that isn’t vague on how to put videos on planes. i just want to add a video as the background for a 2D orthographic game.

I’ve read through this: Video Textures | Learn PlayCanvas but not much is told on how to implement or use it. do i add the script onto the material? the plane? everything i try doesn’t seem to work. i am a little lost, sorry :sweat_smile:

help would be much appreciated.
thank you!


Yes, it’s quite as you say, fork the project and reuse the same scripts/material on a plane model.

If you aren’t getting the expected result, try sharing your project so we can take a look at.

@Leonidas that was a good idea, since it made me learn the scripts were applied to the Root! it never even occurred to me. :exploding_head:

on that note, i added a plane to the forked project, and just adding the Screen material was all that it needed to work. i tried to recreate what i could, but all it seems to do is turn the plane white when i apply the material (with scripts in the Root). it might be because of the 'Play Event tv:play’ but that’s just a hunch. still a bit puzzled on this one.

here’s the project link: PlayCanvas | HTML5 Game Engine

okay so with some testing around i figured out that the very specific Screen material in the Video Textures | Learn PlayCanvas project is what was necessary for it to work at all! it’s weird that it can’t be made from scratch within PlayCanvas itself in my opinion (or at least there are no instructions on how to do so).

for those who are wondering how to do this here are the steps:

  1. Fork the above linked project

  2. Replicate the tv-screen.js and video-texture.js into your own project

  3. Add the replicated scripts into your project’s Root entity as a component

  4. Copy the Screen material from the Forked Tutorial and paste it into your own project

  5. Attach the Screen material to your tv-screen.js then your video file/URL to your video-texture.js with both Play Events set to tv:play

that should be all i know

1 Like