Multiple video-texture players

Hello everyone, I am having a big problem. I am using this example and what I am trying to achieve is to have multiple videos with play and stop buttons. this is what i have so far:


var Video4Floor = pc.createScript('video4Floor');

Video4Floor.attributes.add('video', {
    title: 'Video',
    array: true,
    description: 'MP4 video asset to play back on this video texture.',
    type: 'asset'
});

Video4Floor.attributes.add('playEvent', {
    title: 'Play Event',
    description: 'Event that is fired as soon as the video texture is ready to play.',
    type: 'string',
    default: ''
});

// initialize code called once per entity
Video4Floor.prototype.initialize = function() {
    var app = this.app;

    console.log(this.video);
        console.log(this.video2);

    // Create HTML Video Element to play the video
    this.videoplayer = document.createElement('video');
    this.videoplayer.loop = true;

    // muted attribute is required for videos to autoplay
    //this.videoplayer.muted = true;

    // critical for iOS or the video won't initially play, and will go fullscreen when playing
    this.videoplayer.playsInline = true;

    // needed because the video is being hosted on a different server url
    this.videoplayer.crossOrigin = "anonymous";

    // iOS video texture playback requires that you add the video to the DOMParser
    // with at least 1x1 as the video's dimensions
    var style = this.videoplayer.style;
    style.width = '1px';
    style.height = '1px';
    style.position = 'absolute';
    style.opacity = '0';
    style.zIndex = '-1000';
    style.pointerEvents = 'none';

    document.body.appendChild(this.videoplayer);

    // Create a texture to hold the video frame data
    this.video4Floor = new pc.Texture(app.graphicsDevice, {
        format: pc.PIXELFORMAT_R8_G8_B8,
        minFilter: pc.FILTER_LINEAR_MIPMAP_LINEAR,
        magFilter: pc.FILTER_LINEAR,
        addressU: pc.ADDRESS_CLAMP_TO_EDGE,
        addressV: pc.ADDRESS_CLAMP_TO_EDGE,
        mipmaps: true
    });
    this.video4Floor.setSource(this.videoplayer);
    
    
    this.videoplayer.addEventListener('canplaythrough', function (e) {
        app.fire(this.playEvent, this.video4Floor);
    }.bind(this));

    // set video source
    //this.videoplayer.src = this.video[1] ? this.video[1].getFileUrl() : this.videoUrl;

    document.body.appendChild(this.videoplayer);
    this.videoplayer.load();
};
Video4Floor.prototype.playVideo4Floor = function () {
      //  this.videoplayer.currentTime = 0;
    this.videoplayer.play();
};
Video4Floor.prototype.stopVideo = function () {
    this.videoplayer.pause();
    this.videoplayer.currentTime = 0;
};
// update code called every frame
Video4Floor.prototype.update = function(dt) {
    // Transfer the latest video frame to the video texture
    this.video4Floor.upload();
    
   /*             if(this.app.keyboard.isPressed(pc.KEY_ESCAPE)){
                    this.stopVideo();
                    
                }
                    if(this.app.keyboard.isPressed(pc.KEY_SPACE)){
                    this.playVideo4Floor();
                    
                }
      */              
};

Video4Floor.prototype.changeVideo00 = function() {
       this.videoplayer.src = this.video[0] ? this.video[0].getFileUrl() : this.videoUrl;  
};
Video4Floor.prototype.changeVideo01 = function() {
       this.videoplayer.src = this.video[1] ? this.video[1].getFileUrl() : this.videoUrl;  
};

My problem is that both planes where I project the video, play the same video. It doesn’t matter that you assign a video to one and a different one to the other, they always play the same one. In the script I put an arrangement of videos to be able to load as an attribute, in a plane I choose one only and in another a different one, however it always reproduces the same in both panels.
Heres a video of the problem:

I’m not very good at programming, try many alternatives, duplicate the scripts and assign different names to all the functions and variables, also duplicate the material that is assigned and the same thing continues to happen: / Thanks for any kind of help!

Are the play events the same for both videos? If they are, they need to be different otherwise both video materials with given the same video texture via the event callback.

2 Likes

How could I assign different events to prevent that from happening?

In the editor on the video texture and tv screen scripts:

Make sure these are unique per video.



Well now this happens to me. The video on the left changes: (((

I found this https://playcanvas.com/editor/scene/901629 helps a lot, now my problem is the videotexture is a little different from the one I was using, I can’t understand how to make the buttons below the videos shoot only the video from that screen

There are a number of ways to do this. First, you will need to keep a reference to the video element that is created in videoTexture so that you can call the functions on it such as play/pause

One approach is to fire events from the button, via the app object that the videoTexture listens to. Example: https://playcanvas.com/editor/scene/693479

In your case, you need have unique events per video.

Other methods would be for the buttons to reference the entity that has the videoTexture script so it can call functions on the script or fire events on the entity that the video texture script listens to.

Or the videoTexture can have attributes that reference the buttons for the controls of the video and listen for the click events on each.

1 Like

I’ve made a quick example here of the following method: https://playcanvas.com/project/813001

2 Likes