Help playing video inside playcanvas

Help & Support
1

Hello all,
I am trying to reporduce de example of playing a video as a texture, but can’t make it work. It just load the first fotogram, and stay static in it.
The test project : https://launch.playcanvas.com/607515?debug=true
It is based in the example in https://developer.playcanvas.com/en/tutorials/video-textures/

thanks in advance :slight_smile:

2

Looks like another change from Google Chrome has stopped auto playing of videos.

You may have to trigger the playing of the video on a user click/button press.

3

Thaks yaustar,
I’ve just seen that it is my fault. Bad copy & paste, and didn’t included de Videotexture.prototype.update function. :frowning:

Thanks again :slight_smile:

4

Hi Juan,

can you send me a link to your project for this https://launch.playcanvas.com/607515?debug=true3 so I can look at your code? I was not able to include a video using the example https://developer.playcanvas.com/en/tutorials/video-textures/3

All the best,
Peter

5

The link
https://playcanvas.com/editor/scene/607515

Good luck

JPeter

6

Thank you :slight_smile:

7

I tried to launch the projet below, but I get a Chrome console error for the videofile

Failed to load https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/video/playcanvas-web-small.mp4: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://launch.playcanvas.com’ is therefore not allowed access.

Any Idea how to fix this?

8

I think I found another thread with this issue Video Texture - URL

9

Can you link to your project please?

10

Hi

I’ve got the same issue.

I can set a video texture as a source of the texture of material, but it appears, that the play() function does not work.

I guess, this is due to chrome on mobile blocking the autoplay.
Is there a way to start a video or change a frame? Maybe any hack to implement a video as a texture?

I’ve spent hours on this issue…

My code:

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

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

Videotexture.attributes.add('videoUrl', {
    type: 'string'
});

// initialize code called once per entity
Videotexture.prototype.initialize = function() {
    var app = this.app;
    
    // Create a texture to hold the video frame data            
    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;

    // Create HTML Video Element to play the video
    var video = document.createElement('video');

    video.setAttribute('autoplay', '');
    video.setAttribute('muted', '');
    // This is critical for iOS or the video initially goes fullscreen
    video.setAttribute('playsinline', '');
    video.src = this.videoUrl;
    video.crossOrigin = 'anonymous';
    video.loop = true;
    
    videoTexture.srcObject = video;

    // iOS needs a user action to start the video
    if (pc.platform.mobile) {
        window.addEventListener('touchstart', function (e) {
            e.preventDefault();
        });
    }
    video.addEventListener('canplay', function (e) {
        videoTexture.setSource(video);
    });

    video.play();
    // 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.emissiveMap = videoTexture;
        material.update();
    }

    this.videoTexture = videoTexture;

    this.upload = true;
};

// update code called every frame
Videotexture.prototype.update = function(dt) {
        this.videoTexture.upload();
};

my project

The project https://launch.playcanvas.com/607515?debug=true also does not work. But it works on my desktop.

11

Correct, it has to be started from a user action such as touch down.

12

Thanks, could you guide me on how to do this? Can I do this with just another script?

13

On any user input event (eg key down, mouse down, touch down, button down etc), in the callback call the video play function. That should work.

Taking your code for example:

    if (pc.platform.mobile) {
        window.addEventListener('touchstart', function (e) {
            e.preventDefault();
            video.play();
        });
    }
2 Likes
14

Thank you, it worked great