Video Texture Sound and Quality

Hi, I know I can play video on a texture but would this also play the videos sound (in 2d)?

Also, is there any quality loss when playing a video as a texture.

I basically want to emulate a fullscreen video using a video texture.
Thanks

The way video textures work is that the app would add the video DOM to the document page and every frame upload the video frame to the texture.

So yes, sound can play (note that you can’t autoplay videos with sound, it needs a user interaction).

Yes, there can be performance loss in framerate and in quality pending on the resolution of the video.

If you are doing a full page video (ie a video covering the whole web page), you are better off using the video DOM object directly and not use video texture.

Okay good to know Thanks! Is there an example of how to do this (video DOM) somewhere?

There isn’t but as it’s a standard webdev style problem so stack overflow etc will have examples. Search for something like, ‘how to add a video DOM to document with JS’

The video texture example does this too, but the DOM is invisible and 1px by 1px big via style sheet :sweat_smile:

If you do get stuck, post again here and someone should be able to help :grimacing:

Okay thanks, but how would i go about starting/ stopping playback in Playcanvas. It seems there might be more to it perhaps?

There’s a couple of ways (I don’t know what your concept here so I’m guessing here)

If you are using video textures, then you can hook up UI element buttons to call stop/play etc on the video DOM object.

If you using the video DOM directly and therefore overlaying the PlayCanvas WebGL canvas, your best bet here is to use buttons/DOM elements to control the video or tell the video DOM to show controls.

You could use a mixture the video DOM and PlayCanvas UI elements but that depends on what your final layout/concept is.

If you can show a mock up of what you are looking to produce, that will help.

Its just a full screen video and to be honest all I need would be a single button (or just a screen tap) to stop and hide the video but also I’d want the size to change depending on the aspect ratio of the device (portrait or landscape).

Just to check, full screen or full page?

Either way, it does sound like using a library like video.js would be best there https://videojs.com/

full screen :slight_smile:

In which case that’s a bit easier as the standard way to get out of a full screen video is to press escape or back on your phone.

Actually I have no idea how to use external libraries like this, I had a look at the quickstart and in terms of Playcanvas I just don’t know where the html code all needs to go. There seems to be about 16 files in videojs too which seems overkill. As soon as I start having to mix things with other libraries I am clueless about how I communicate with them via Playcanvas.

Is there not just a FullScreenVideo(“myvideo”).Play()

:slight_smile:

Ultimately, this is all web development regardless of the fact the PlayCanvas editor is being used here. All the JS code you write in the Editor is just executed straight on the document page.

I’ve been meaning to write a few pages on how everything is put together and what/how to use external libraries.

It’s ultimately just stick the browser version of the library into the project and use it as per their documentation based on events/input in the PlayCanvas app.

I might turn this exercise into a user manual or tutorial.

That would be SUPER helpful if you could. :slight_smile:

Looked at all the libraries and figured it be better in your case to just do it simply. video.js was another 500KB (150KB compressed) and your usage example was rather the simple:

https://playcanvas.com/editor/scene/1151921

Edit: Not tested on iOS but should work.

Nuts, forgot that iOS has no full screen API :thinking:

Fixed iOS: https://playcanvas.com/editor/scene/1151921

This is not battle tested so if there is an edge case that doesn’t work, it will need fixing and I might not have bandwidth to do so. The code should be straightforward so it’s worth trying to understand how it all works.

This is really great Thanks!! The only things that seems to be a slight issue when I test this on a device is that when you return to the app from the video, the app resolution is slightly squashed and some of the button/element anchoring is messed up. I guess its something that happens when the video switches resolution and it doesn’t switch back properly?

Can you provide a Screenshot/video and device, OS version and browser that is being used? I didn’t see the issue on device with my test project.

Mobile browsers do weird stuff when coming out of fullscreen/rotations.

Sure. Here are the before and after (the video) shots of the UI!
BEFORE:


AFTER: