Video Textures Best Practice

Help & Support
1

Hi, I have multiple video screens in my project. Some screens play one type of video wheras others play a different type of video.

I want tohe ability to pause/unpause individual videos while the other videos playback are unaffected.

I’ve been through the video tutorial and I have videos playing but I cant seem to manage to separate their interaction behaviour. Currently when I pause a video, all videos with the same video pause. Also, many times when I click on a object(video screen) to pause/unpause it only works on one of the objects and not all of them. Whats more this seems to change each time I run it.

As you can see, I’m having a lot of trouble controlling video. Is there an example somewhere of being able to pause/unpause multiple videos without affect other videos of the same type or otherwise. The current video example on demonstrates a single video and doesnt really show me how to work with multiple.

Cheers

2

How are you pausing the video?

Consider how the video textures in your project work. There’s a video div created for the video and its being applied to a texture.

If there are multiple places in the scene are using that texture, then if you pause the video div, the texture data won’t change. So wherever the texture is being used, they will all look the same.

3

You pretty much have several options:

  • Have multiple video divs using the same video source (one per video texture)
  • Have multiple textures referencing the same video div but the upload/update of video → texture is independently controlled
  • Have the same texture used in the scene in multiple places but when ‘pausing’ replace with a still frame (which can be anything you want or a clone of the video texture on that particular frame)
4

Thanks. I’m pausing with:

this.video.pause(); 
this.entity.sound.pause();

where this.video is the document.createElement(‘video’);

5

Trying with the multiple div option; when I give each video div a different name like:
var video = document.createElement(“someOriginalName”)

I just get the error:
video.load is not a function

If I use: var video = document.createElement(“video”)
…I dont have the problem.?!? Whats happening?

The html element must be called ‘video’?

6

Each of my videos has its own script and in each of those scripts I have:

var video = document.createElement('video');

Surely this means I already have a different div for each video? Or no?

7

From the code you have shown, yes. It would also be great to post a small public project for the community to have a closer look your issue too :slight_smile:

8

I would post t but its a clients project so I cant.

The whole ‘multiple video’ control isn’t working anyway even though it seems I already have a different div for each video. :frowning:

9

Can you create a new public project to showcase the issue?

10

Just tried it myself here and using multiple divs works fine: https://playcanvas.com/project/1061141

Press 1 or 2 to pause/play the videos on each screen

Are you sure you are using separate textures and materials for each ‘video screen’?

2 Likes
11

Ooh, let me examine this further and get back to you. Much appreciated!

12

Ok in the end its because I needed to assign a different material (basically just duplicate my video material x times) to each of the separate video screens.

Thanks so much for this!