Html5 MP4 file size unknown streaming. Best approach? - html

Is it possible to create mp4 file/container with out the size.
I am using media foundation to convert some file into h264/acc and wrap it around mp4.
What happen is that as file finishes up the encoder adds the size of the file.
I need to start streaming as soon as the encoder starts encoding the data.
And client is going to do a progressive download.
Is this feasible. Of course I am using html5 So rtp/rtsp is out the question.
Or is Ogg/Theora a better way to do this ? Do we need to know the file size or can we just stream it ?
I know each browser has different decoders.

Would it be possible to lie about the size in the mp4's headers?

The issue here is that you will not be able to get a playable mp4 without the atom being completely written. [Exact size and location of all the chunks]. So the answer to your first question is no. You cannot do it with mp4. A transport stream is the best way to do it. I have not tried Ogg/theora so don't know about that but a ts can be streamed right away.
If you need a solution that works across all browsers it is a bit of a pain.

I don't think I understand what you are doing but I stream mp4 and it works fine in modern browsers. Only IE9 struggles with it and won't play as you would expect. Ogg files work fine, too.
I've found that mp4 encoded with any converter works fine in any modern browser, too, but I needed to use handbrake to get them to work in IE9. Still haven't figured out why and no one at Microsoft knows either cause I've asked this question just about everywhere without response.

Related

uploaded video only audio is displayed

I am trying to upload an MP4 file. But with this specefic file only the sound content is displayed.
With all my other videos there is no problem only with this specefic one.
i found the following SO question:
HTML5 video of type video/mp4 playing audio only
Where he suggest to find a converter.
Does anyone know if this could be the problem and how do i secure that regardless of what video my user uploads that it will always be able to play?
Yes, this can be a problem.
You have not written about your server limitations, so if you have the possibility to execute converters (like ffmpeg) then this is the best solution. This way you can also guarantee fixed resolution, framerate and various other properties, and your server won't eat up all the space if someone uploads a 2GB video... (Users can be dumb sometimes.)
If you cannot run ffmpeg on the server then try reading some about how can you detect codecs on your server, in the language you use, etc. Then, if you still want to, post a specific question.
Also try opening your videoplayer page with different browsers (Chrome, FF, IE at least). They might not support the codecs the same way.

Flash and "206 partial conent" http status code

I use JWPlayer to play videos from the server. Videos are encoded using h.264 codec. If i open them in browser with h.264 support - video plays nicely and i can seek it, because server returns 206 header browser understands that its partial content. But if i try to play same video on Opera, for example, flash player is being used and it receives 200 OK! 2 problems here:
I can't seek the video, until part of it is downloaded
If the video is not "properly" encoded player can't even start playing it, until file is fully downloaded.
Is there something wrong with flash properly asking/understanding http headers?(i've never worked with flash before, so maybe my question is a bit silly and i just don't know flash's limitations)..
1) You need to have pseudo streaming enabled, for Flash - http://www.longtailvideo.com/support/jw-player/28855/pseudo-streaming-in-flash, if you can provide a link though, I will take a look at exactly what is going on here, I am more or less guessing about this one. HTML5 does not require a pseudo streaming module to be installed on the server side, though. In Flash, the default is progressive download, so you can only seek to downloaded parts, and in html5, this is not the case.
2) Yes, that is because of encoding. If your MP4 files cannot be seeked before they are completely downloaded, you will have to fix the MOOV atom (it contains the seeking information) located at the end of your video. Use this little application to parse your videos and add the necessary cue points - http://renaun.com/blog/2010/06/qtindexswapper-2/
Also, encoding via HandBrake - http://handbrake.fr/, can fix this as well, so the above tool wouldn't be necessary. You can encode using HandBrake, and enable "web optimized", which does the same this as the Index Swapper Tool. HandBrake also has command line encoding options as well.

Two H.264 mp4 videos: One plays in Chrome, one doesn't

I have two different videos, both (as far as I know) generally captured in the same manner, that I'm trying to play using an HTML5 video tag in Chrome. Both videos open and play perfectly in VLC, so I don't think there's any issue with a corrupted file, and both are mp4's with an H.264 format, using YUV color space. However, when I try to play one in Chrome (Version 21.0.1180.89) it gives me a grayed-out play button, while the other works perfectly. For reference, my OS is Ubuntu 10.10, although I've seen the same problem in newer versions of the OS. This is whether I'm loading the video into the HTML5 tag, or navigating directly to the URL where the video is being stored. I'm somewhat at a loss here, does anyone know what direction I should go to find what the significant differences are between the two videos?
Edit:
This one works: https://dl.dropbox.com/u/100841270/1_G101_20120914_0139PM_Course_101.mp4
This one does not: https://dl.dropbox.com/u/100841270/1_G101_20120914_1156AM_Course_101.mp4
Update:
It appears to have nothing to do with OS, since I've seen the same problem in both Windows and Linux. Chrome 22 beta in Ubuntu didn't seem to work either.
We had this problem and found that encoding the files in accordance with iPhone's webview's standards created files that played fine in Chrome. Chrome and iPhone webview share the same render engine, and it appears they have similar HTML5 video requirements.
Not all H.264 encoded Mp4 files are supported by Chrome and slight differences in the encoding process can produce videos that do not work. Even if the EXACT same encoding settings were used, H.264 is a variable bit-rate encoder, so different videos may exceed bitrate limits.
The encoding settings that were successful for us were:
Only use the H.264 Baseline Profile Level 3.0
Resolution below 640 x 480 and framerate up to 30 fps
B frames are not supported in the Baseline profile.
bitrate limit of 900kb.
Here is the reference we used to arrive at those settings. Likely not all of these are required for Chrome, but we stuck to these rules and found that all videos worked on both platforms. Further research could likely determine the exact setting that is/was causing Chrome to not play the video.
I am running Windows XP, and chrome doesn't like the second one either.
My best guess of the cause is that, the working one is only 6.4 MB, but the other one is about 21.7 MB. Chrome might just be refusing to directly play a video that big. Have you tried having YouTube host it, and embedding their player into your site? That may solve the problem. (If you are worried about random strangers watching the videos, why did you post them here? Why would anybody even want to watch them? Though, you can make videos private on YouTube, in case these are just two videos that demonstrate the same problem you are facing with the real videos.)
That may also be compounded by a different problem that exists with both videos, manifested when I try to use Windows' built-in player. Both videos appear distorted when I use my computer's video player, stretched like 300% horizontally.
Are there other videos you have that fail in exactly the same way? Since these are only test videos for the real thing, if this is the only video with that problem, I would not say that it really is a problem unless it recurs. The dysfunctional video may have just run into that one-in-a-million chance that it has just the right contents for it to not work.

encoding video for html5 playback

I am creating a video portfolio website with a large quantity of videos and I am wondering as to the best way to go about encoding the videos for web playback. I am using the html5 video for everybody methodology, so I need the video encoded in the following 3 formats:
h.264
Ogg
WebM
I don't necissarily NEED WebM, but it would be nice.
Up until now I've been using a combination of Handbrake and ffmpeg2theora, but I am looking for some sort of all in one solution, as Handbrake seems to have trouble with large sized videos, and ffmpeg2theora is just a pain in the ass. Does anyone have any suggestions?
Thanks!
Miro Video Converter works really well for all those formats.
It's essentially a wrapper UI for ffmpeg and has limited options but does a good job.
You can also display the ffmpeg command log and tweak the command if the default output doesn't satisfy you.
It's also free.
You might want to take a look at VLC's conversion functionality. It can export in a number of different formats using export plug-ins, and has a handy encoding queue as well. As of right now I know it can do H.264 as well as Theora ... I'm not sure about WebM ... my version doesn't, but there may be an encoding plug-in coming that will do that as well.
Best of all, VLC is free.
Hope this helps,
Jason
FYI I tried Miro, and ran into some odd conversion issues. My .ogg files were fine, but my .webm files were a bit wonky. They'd play/run fine locally, but I'd get an error with the file when I uploaded it to my server (it would play once, and then hang every time thereafter).
I had some luck with Firefogg, which I ended up using without problems.
However, both Miro and Firefogg are more of a one file, click, convert approach. If you're wanting to do a large batch, here's a guide that a friend sent to me, from Brett Terpstra: Automating HTML5 Video Encodes. It's way over my head... but perhaps of some use to you.

HTML5 live video "hack"

For the last two month I have been trying to "fool" safari into thinking that it's looking at a file on the server, which in fact is a live video stream from a camera encoded and muxed upon request using Gstreamer into a format that is supported by the browser. Since HTML5 supports progressive video downloads this should at least be possible in theory.
My conclusion is that this gets quite complicated considering that browsers make a partial content request when downloading video files in HTML5, mainly for the sake of seeking. If the server lacks support for this feature the video is not played until the file is completely downloaded.
Have anyone else tried this approach with more success? Or should I just give up and wait for true live video support like RTSP to be integrated into browsers.
Cheers.
This article provides some useful tips: https://developer.mozilla.org/en/Configuring_servers_for_Ogg_media
Are you serving the X-content-duration header?
You have two possibilies.
With H.264 you can emulate a file with fragmented structure: ISO container (.mp4) with movie fragment atoms (MOOF's).
The other option is Google's WebM. Clients can "join in" the stream any time thanks to MKV file's structure. For best results the first frame transmitted to the client should be akeyframe.
If you only need video but not audio, "Motion JPEG" can do it. It's not HTML5 but a Netscape-era feature.
http://en.wikipedia.org/wiki/Motion_JPEG#M-JPEG_over_HTTP