Jump to content

Video Texture issue with larger files?


Dinkelborg
 Share

Recommended Posts

Hi, as I'm looking into the video texture component at the moment, I ran into yet another problem:

At first I tried to play a short and small video file so that I wouldn't have to wait too long while testing, this worked flawless: looky here  code here

 

But when I tried the same thing with a huge file (24,6MB) that I had downloaded from youtube for testing (so it was loading fine on youtube, why wouldn't it load for the texture, right?) it would start loading it, then stop without any output, when I re-sized the file to a smaller image size and less quality (17,1MB) the file would still not show, but for some weird reason the audio now gets played in super fast forward: looky here code here (although nothing changed in code except for the video url) 

 

So I tried to make the video component preload, tried to make it load manually, I got output while its loading and tried to get output when it would be ready to play, although that never triggered... 

 

Since I am clueless as for how to solve this, I hope someone here could help me out (again :D

 

Thanks for any hint or help in advance!

- Dinkelborg

Link to comment
Share on other sites

I tried to split the video (24,6MB) into 1MB long videos, and while the first video (of 24) is played now, it does not play the others am I doing something wrong here: 

 

    t_vid1 = new BABYLON.VideoTexture("video", ["js/assets/movie/split/penguins_trailer_1.mp4",                                                "js/assets/movie/split/penguins_trailer_2.mp4",                                                "js/assets/movie/split/penguins_trailer_3.mp4",                                                "js/assets/movie/split/penguins_trailer_4.mp4",                                                "js/assets/movie/split/penguins_trailer_5.mp4",                                                "js/assets/movie/split/penguins_trailer_6.mp4",                                                "js/assets/movie/split/penguins_trailer_7.mp4",                                                "js/assets/movie/split/penguins_trailer_8.mp4",                                                "js/assets/movie/split/penguins_trailer_9.mp4",                                                "js/assets/movie/split/penguins_trailer_10.mp4",                                                "js/assets/movie/split/penguins_trailer_11.mp4",                                                "js/assets/movie/split/penguins_trailer_12.mp4",                                                "js/assets/movie/split/penguins_trailer_13.mp4",                                                "js/assets/movie/split/penguins_trailer_14.mp4",                                                "js/assets/movie/split/penguins_trailer_15.mp4",                                                "js/assets/movie/split/penguins_trailer_16.mp4",                                                "js/assets/movie/split/penguins_trailer_17.mp4",                                                "js/assets/movie/split/penguins_trailer_18.mp4",                                                "js/assets/movie/split/penguins_trailer_19.mp4",                                                "js/assets/movie/split/penguins_trailer_20.mp4",                                                "js/assets/movie/split/penguins_trailer_21.mp4",                                                "js/assets/movie/split/penguins_trailer_22.mp4",                                                "js/assets/movie/split/penguins_trailer_23.mp4",                                                "js/assets/movie/split/penguins_trailer_24.mp4",], 256, scene, false);

I looked at the example here and it doesn't look any different... 

It keeps repeating "penguins_trailer_1.mp4" in a loop ...?

I also noticed that as soon as the window looses focus, the video is stopped and cannot be started again in any way ... that's kind of really bad o.O

Link to comment
Share on other sites

Hi again, D

 

See http://babylondoc.azurewebsites.net/page.php?p=22161

 

"The VideoTexture object accepts an array of videos (to take into account various codecs). The first video in the array that can be loaded... is the one used as content source. Currently, HTML5 supports .mp4, .webm, and .ogv video formats."

ecran.material.diffuseTexture = new BABYLON.VideoTexture("video",["Scenes/Flat2009/babylonjs.mp4", "Scenes/Flat2009/babylonjs.webm"], 256, scene, true);

In the above example, babylonjs.mp4 tries to play.  If the computer has no codec for that video format (it fails), then it tries to play babylonjs.webm.  Then maybe it could try "babylonjs.avi", etc.  I think these are called "fallbacks".

 

On the focus issue, I don't have an answer.  In the videoTexture demo, the video continues playing even when the focus is on the editor window.  So, hmm.  I made my browser window smaller, and opened a Wordpad and gave it focus.  The playground video still played.   I cannot seem to reproduce this problem.

Link to comment
Share on other sites

Okay, I understand... So the array is only for fall-backs, but why can't I use larger video files? Normally the video element would just buffer a certain range of frames and then play them while it keeps buffering the rest of the video, right? At least that's what the HTML5 documenation says about it. But with very large files the video will start loading, and then suddenly stops without any playback (can also not be forced ... I tried to make it play with commands, no effect)

And intermediate sized videos ~10MB - ~20MB are not played video wise but the audio plays with I don't know 5 times its original speed or so? What is going wrong there?

Link to comment
Share on other sites

Seems irrelevant, but where do you host the video file from? localhost? what server are you using?

I had a certain problem with HTML5 video tags since they were hosted on a server that didn't support 206 Partial Requests. Which forced the video to fully load before it started playing. Check your console, see that the video's meta data are first loaded.

I doubt this is the reason it doesn't work, but might be worth it to check.

The demo scene - http://www.babylonjs-playground.com/#EKFLA is actually using a video file larger than 10 MB, so I doubt the size of the file is main cause of the problem.

Link to comment
Share on other sites

I'm using a free hoster called "bplaced.net" but I also tested it locally - I use Webstorm as developer environment and it created a local server emulation just like xamp or wamp would do. It doesn't work locally nor globally so I guess that is not the problem... 
Where exactly is the testscene's video hosted? would it be possible to just reference the http-url in my code to test if that works... then again why wouldn't it... if it works in the playground...

Link to comment
Share on other sites

Okay so when I tried this: 

 

t_vid1 = new BABYLON.VideoTexture("video", ["http://www.babylonjs-playground.com/textures/babylonjs.mp4"], 256, scene, false);

it shows the error message attached to this reply, 

I also converted the 7MB trailer I had to 3gp and it does play the audio of that, but not the video, I was watching the console and even after the entire file has been loaded the video is not shown.

post-11235-0-68040500-1427551506.png

Link to comment
Share on other sites

@Wingnut:

So... while playing files larger than 1MB still doesn't work, here is a first version of the whole video swap idea: http://analogmadness.bplaced.com/Demo/VideoSwap/
 

You can click the red ball and it will switch the video with a little effect, or you can click the video itself and change it tile by tile...

BTW: Switching tabs for me crashed playback for both videos but while testing they often also just randomly stop playing :/ 
While it is a first step this is anything but presentable ...

How come there are so many issues with this o.o

Link to comment
Share on other sites

The link you just posted is not found (404), but going back to your first post I found this video there - http://analogmadness.bplaced.com/Demo/VideoSwap/js/assets/movie/penguins_trailer_small.mp4 

Even opening it without babylon, displays nothing. Just Audio. So I guess it is the film itself. I tried with both google chrome, IE (which opened it in the media player). Audio only...

Link to comment
Share on other sites

Not to complaint, but thought you might want to be informed that iOS is a "spank free experience".  All you see is the little meter showing "something", and red sphere sliding on a pole with an iPad Air 2 on safari.

 

As I couch browser this forum more & more,  the more I am starting to see issues on iOS.

Link to comment
Share on other sites

iOS only supports WebGL from iOS-Version 8.1 on before that it was diabled by Apple (or at least very restricted) so if your iPad runs any other version it wouldn't work at all and since 8.1 is the first version allowing WebGL to run, it might just not be entirely ready and optimised for it

Link to comment
Share on other sites

As an aside, http://www.babylonjs-playground.com/#EKFLA works nicely for me in Chrome, but in Firefox the video does not play. Looking in Firebug, network tab, the request for babylonjs.mp4 gets immediately aborted, but the .webm version is not tried. (I also tried ctrl-shift-R to make sure it was not a cache issue.)
Trying http://www.babylonjs-playground.com/textures/babylonjs.mp4 directly in Firefox works fine.
 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...