[SOLVED] Uploading and playing Video

Does anyone know if it’s possible to upload and play a video directly from the Playcanvas editor? I tried following the video textures tutorial but it seems to require a video to be hosted on an external site, which I don’t have. I tried uploading a .mp4 file to Playcanvas, but it imported as an audio asset, and I don’t know how to play the visual part.

Thanks

Even though PlayCanvas editor thinks it is audio, it doesn’t process/modify the file in any way so it is still a video file.

I’ve made a sample project showing a video that I’ve uploaded to PlayCanvas and playing it to a texture: https://playcanvas.com/editor/scene/574109

1 Like

Thanks so much, worked like a charm :grinning:

Hi Yaustar,

I get this error using your code

[launch.js:7535]: Uncaught TypeError: Cannot read property ‘split’ of undefined

TypeError: Cannot read property ‘split’ of undefined
at console.error (https://launch.playcanvas.com/editor/scene/js/launch.js:7535:36)
at ResourceLoader. (https://code.playcanvas.com/playcanvas-stable.dbg.js:37650:23)
at AudioContext.error (https://code.playcanvas.com/playcanvas-stable.dbg.js:38065:7)

I noticed your project settings has Audio, mine doesn’t, so I can’t enable legacy audio

Is there a workaround for the current playcanvas editor online?

Or do I need a special tier account?

Thanks,
-ANton

I don’t get any errors running my old project. Can you send a link to yours that is showing this error please?

I don’t know what you mean by this?

No worries, I figured out the issue. The mp4 video I uploaded was corrupt. The real issue is that I can’t load videos as textures on my iPhone so I thought loading local videos instead of cross-domain videos would solve the issue but I was wrong. Although local videos may work on full-screen on iPhone, mapping it onto a texture doesn’t work. I have yet to see a working example of this. If you know of any PlayCanvas developer that can give me an example of a video texture that I could load and see work on my iPhone, please let me know. I can even pay for them to debug my code. Need to fix this issue as soon as possible so that I can continue with the classically animated video production (that will be added as textures within my game).

I’m afraid I don’t have a iOS device to test with. The thing to note that I think both iOS Safari and Android Chrome prevent autoplaying or at the very least prevent audio from video autoplaying without some user interaction (like a tap or a click on the screen).

Actually, can you check this published build please on iOS? https://playcanv.as/p/rCIoFmmr/

Sorry for the late reply.
I checked on my iPhone and the tv screens remain black even after I press the screen.

I’m trying to find any working PlayCanvas examples of video texturing specifically working on my iPhone but haven’t yet seen a working example. Sucks.

So I tapped harder before the tv falls. The video loads full screen and one I exit full screen the tv graphics breaks. See attached image. This is sumiliar to what happens in my own game. The entire graphics of the game becomes corrupted

That’s interesting :thinking:. Looks like iOS Safari does something different with video. Unfortunately, I don’t have an iOS device to test against and check the console logs.

For me on iOS, when I tap the screen, the image on the TV turns from black to the first frame of BBB. Then, a full-screen video player pops up showing a black screen but playing the audio of the video ( a yawn sound ).

If I close the video, I see the correct visual of the 3D models with a static image on the TV from the movie ( I’m not what Anton is seeing, where the orange part of the TV is missing ).

iPhone 6S Plus, Safari or Chrome, using /p/ or /e/p/

My phone is 5s, so maybe that makes things worse than your 6s. But according to Safari’s inline attribute being accommodated with these devices, theoretically it should be fine in both devices.

Anton, speaking of differences, can you try out the link on this thread and post your results - there def seems to be strange things going on with PlayCanvas and iOS!

Here is the console error:

SecurityError (DOM Exception 18): The operation is insecure.

texImage2D — playcanvas-stable.min.js:4934:591SecurityError (DOM Exception 18): The operation is insecure.

done. it’s about 11 fps

Did any one find the solution to this? My video texture is coming from a different origin, and I have CORS enabled on the CDN with the Access-Control-Allow-Origin header set as wildcard, and the videos and images I’m pulling work fine on Chrome and Firefox, but Safari still pushes this error:

playcanvas-stable.min.js: The operation is insecure.

Good news!

The problem was just Apple being Apple. Safari is not a big fan of CORS requests that return a redirect response. As far as the browser is concerned, the redirect’s headers don’t mean anything. I solved by changing the way I fetched my videos to ensure that the src of the video element matched the redirect response like so:

MediaPlayer.prototype.initialize = function() {
//...
if(!this.url.startsWith('https://')) {
        this.url = BasePath + this.url;

        this.getRedirect(this.url).then(function(response) {
            this.url = response;
            this.prepareVideo();
        }.bind(this));
    }

else {
    this.prepareVideo();
}
//...

};


MediaPlayer.prototype.getRedirect = async function(url) {
    const response = await fetch(url, {
        method: 'HEAD'
    });

    return response.url;
};

MediaPlayer.prototype.prepareVideo = function() {

    var ext = this.url.split('.').pop();
    
    if (ext === "mp4" || ext.includes('/ajax_cont_req')) {
        
        this.video.crossOrigin = 'anonymous';
        this.video.loop = 'true';
        this.video.preload = true;
        this.video.muted = true;
        this.video.src = this.url;
        this.video.playsInline = true;
        this.isVideo = true;
        this.video.addEventListener('timeupdate', function(e) {
            this.entity.fire('currentTime', this.video.currentTime, this.video.duration);
        }.bind(this));
        this.video.addEventListener('seeked', function(e) {
            this.entity.fire('loop');
        }.bind(this));
        this.video.addEventListener('canplay', function (e) {
            if(this.playButton) {
                this.playButton.button.active = true;
            }
            this.texture.setSource(this.video);
        }.bind(this));

    } else {
        image.addEventListener('load', function (e) {
            if(this.playButton) {
            this.playButton.button.active = true;
        }
            texture.setSource(image);
        }.bind(this));
        image.crossOrigin = 'anonymous';
        image.src = this.url;

        this.isVideo = false;
    }

    if(this.playButton) {
        this.playButton.button.active = false;
    }

    if(!this.playButton && this.autoplay) {
        this.play();
    }

};

2 Likes

Screenshot 2022-04-17 at 9.54.47 PM

i am trying to play video texture in playcanvas, i downloaded the sample video from tutorial and upload to my own project , also copy the video-texture.js and tv-screen.js to my project , but when i run it, somehow i got this error

And i just found i don’t have Audio Setting in my project. did i missing something ?