encoding video for html5 playback - html

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.

Related

HTML5 video streaming issue

I know this kind of problem was already mentioned, but, I have to play some videos who are encoded in MP4 (h264 / AAC). Some of them are 2 hours long, sometimes more.
The problem is that they don't start quickly, because I need to download a random amount of data to be able to play the video : the browser doesn't load the entire file, but 5/6MB, which is a problem for the lowest connexions.
I tried the FFMpeg option -movflags +faststart but it changes nothing.
I tried the qt-faststart tool, it says "last atom in file was not a moov atom".
The server seems to be configurated to allow partial requests (Accept-Ranges:bytes in Response Headers).
Did I tried everything? Is there something more I can do?
Thanks !
Romain
You need to look into adaptive streaming. Either HLS or DASH format would solve your problem. It does entail to review your media delivery architecture and your video player.
Example here: https://www.keycdn.com/support/how-to-convert-mp4-to-hls/
Players like JW Player can read both format on most platforms.

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.

Html5 MP4 file size unknown streaming. Best approach?

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.

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

Embed MP4 in HTML using flash-player

Can I embed MP4-files streaming using a flash-player? I find several places it is mentioned, but some places also mention that flash-10 might be a requirement, it might now work well for streaming etc...
Are there any limitations I should be aware of - and which embeddable flash-player works well?
Yes you can. Flash 9.0.115 is required.
Flowplayer is my favourite. Free and opensource.
MP4 files need to be encoded or fixed using a utility or server code to be fast start - the header information at the beginning of the file rather than the end.
The program to move the metadata to the front of the file is here:
http://rndware.info/products/metadata-mover.html
Use Video.Js .. http://videojs.com/ .. The best Html5 Video player.
Here are a couple of players:
MediaElement: Supports HTML5 and Flash (automatically, if browser needs it). Free and works well for basic configurations. Warning: This project has A LOT of open issues so if your configuration is having problems you're out of luck
f4player: It one of the smallest available at only 10kb and free under the GPL license. It supports flv, f4v, mp4, stream and live stream. It has not been updated in a while though.
Video.js: Don't let the super lame project name fool you. This project is awesome and the best supported of the options. We've been using it on production software for years with no issues. This is your best bet.
I think this also helpfull with video on website:
Jwplayer
www.longtailvideo.com/players/jw-flv-player/
I know also a great video player who supported MP4, Flv and MP4 format: it's KAWA Player ->
http://monmoulin.fr/kawa_player_video_flash.html
Of course, it's totally free!
here's an open source player
http://hdflvplayer.net/
for supporting MP4 videos and more amazing features!
FlashFox works well and is very small. See https://code.google.com/p/flashfox/
Download from http://flashfox.googlecode.com/svn/trunk/ and find usage information on http://v4e.thewikies.com/. You need to provide a full URL for the video, even if it's local.