Ui animation (video acting weirdly) [solved]

Hi everyone,
I’m testing playcanvas for a few week now and so far i’ve manage to do what i want but right now i’m stuck i don’t really understand why it’s not doing what i want.

I’ve used a bunch of entity i select using a raycast script and hit boxes to make evry animation spawn all that part work as supposed to but i must be missing something in my code because only the last animation work as expected and by the last i mean the last i just played it can be any of the video.

I’ve used the tutorial script with a few modification to work in my project

var Videotexture = pc.createScript('videotexture');

Videotexture.attributes.add('materials', {
    type: 'asset',
    assetType: 'material',
    array: true

Videotexture.attributes.add('videoUrl', {
    type: 'string',
    array: true

Videotexture.attributes.add("SwitchingAssets", {
    type: "entity", 
    title: "Assets"
// initialize code called once per entity
Videotexture.prototype.initialize = function() {

    // Create a texture to hold the video frame data
    var app = this.app;
    var videoTexture = new pc.Texture(app.graphicsDevice, {
        format: pc.PIXELFORMAT_R5_G6_B5,
        autoMipmap: false
    videoTexture.minFilter = pc.FILTER_LINEAR;
    videoTexture.magFilter = pc.FILTER_LINEAR;
    videoTexture.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
    videoTexture.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
    var alphaVideo = new pc.Texture(app.graphicsDevice, {
        format: pc.PIXELFORMAT_R5_G6_B5,
        autoMipmap: false
    alphaVideo.minFilter = pc.FILTER_LINEAR;
    alphaVideo.magFilter = pc.FILTER_LINEAR;
    alphaVideo.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
    alphaVideo.addressV = pc.ADDRESS_CLAMP_TO_EDGE;

    // Create two HTML Video Element to play the video and the mask on
    var Avideo = document.createElement('video');
    var video = document.createElement('video');
    var name = this.entity.name;
    var play = true;
    var temp = 'null';

    video.src = this.videoUrl[0];
    video.crossOrigin = 'anonymous';
    video.loop = false;
    video.preload = "auto";

    Avideo.src = this.videoUrl[1];
    Avideo.crossOrigin = 'anonymous';
    Avideo.loop = false;
    Avideo.preload = "auto";
    video.addEventListener('canplay', function (e) {
        console.log('video assign to material');
    // Get the material that we want to play the video on and assign the new video
    // texture to it.
    for (var i = 0; i < this.materials.length; i++) {
        var material = this.materials[i].resource;
        material.diffuseMap = videoTexture;
        material.emissiveMap = videoTexture;
        material.opacityMap = alphaVideo;
        console.log('video is playing');

    this.alphaVideo = alphaVideo;
    this.videoTexture = videoTexture;

// update code called every frame
Videotexture.prototype.update = function(dt) {   
     //Upload the video data to the texture every other frame
        this.upload = !this.upload; 
    if ((play === true)&&(this.entity.name != temp)){
        video.currentTime = 0;
        Avideo.currentTime = 0;
        temp = select(object);
    else if ((this.entity.name == 'HI')&&(play === true)){
        video.currentTime = 0;
        Avideo.currentTime = 0;
    play = video.paused;

There must be something i’m missing but i don’t see what.

Many thanks in anticipation of your response

1 Like

never mind,
I’ve found by myself i was very close this code is correct a few thing are misplaced that’s the story