Help playing video inside playcanvas

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 :
It is based in the example in

thanks in advance :slight_smile:

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.

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:

Hi Juan,

can you send me a link to your project for this so I can look at your code? I was not able to include a video using the example

All the best,

The link

Good luck


Thank you :slight_smile:

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

Failed to load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘’ is therefore not allowed access.

Any Idea how to fix this?

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

Can you link to your project please?


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 =;
    // 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 ( {
        window.addEventListener('touchstart', function (e) {
    video.addEventListener('canplay', function (e) {
    // 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;

    this.videoTexture = videoTexture;

    this.upload = true;

// update code called every frame
Videotexture.prototype.update = function(dt) {

my project

The project also does not work. But it works on my desktop.

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

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

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 ( {
        window.addEventListener('touchstart', function (e) {

Thank you, it worked great