Loading Video As Data URI?

[farhan]

Is it possible to load video as data URI?

I tried to pass the data uri for a video and nothing appears.

It works fine if I load regular video file.

 

This is my code, videoData is a string for the data uri of the mp4 video I am testing. Passing videoData  = ' myVideo.mp4' works fine but when I pass videoData = '_insert_data_uri_string_here_' it doesn't work

var texture = PIXI.Texture.fromVideo(videoData);
var videoSprite = new PIXI.Sprite(texture);
videoSprite.anchor.set(0.5);
videoSprite.x = app.screen.width / 2;
videoSprite.y = app.screen.height / 2;

app.stage.addChild(videoSprite);

Does pixi support data uri for videos?

Thanks.

I am using PixiJS 4.8.2 - ✰ WebGL ✰     http://www.pixijs.com/    ♥♥♥ 

[xerver]

What does "it doesn't work" mean? What errors do you get? Have you stepped into the fromVideo function to see where it breaks down?

[farhan]

1 hour ago, xerver said:

What does "it doesn't work" mean? What errors do you get? Have you stepped into the fromVideo function to see where it breaks down?

There is no error at all. Video just doesn't play at all.

But, I finally manage to figure it out, had to change stuff in pixi.js
There are 2 issues, first createSource the path is being changed to lowercase which breaks the data uri and second is the type where it did not get a proper data from the substr.

Here are my current changes to createSource function, in addition, have to add a isDataURI flag all over to tell i am loading data uri. But I think I will change it to just check in this function if it has base64 in the string.

function createSource(path, type, isDataURI) {
    if (!type) {
		if(isDataURI == undefined) isDataURI = false;
		if(isDataURI)
		{
			path = path.split('?').shift();
            type = path.substr(path.indexOf('data:')+5, path.indexOf(';')-5);
		}
		else
		{
        	path = path.split('?').shift().toLowerCase();
	        type = 'video/' + path.substr(path.lastIndexOf('.') + 1);
		}
    }

    var source = document.createElement('source');

    source.src = path;
    source.type = type;

    return source;
}