HTML5 video solutions
August 17, 2010 @ 3:33pm
Updated — August 20, 2010 @ 8:23am
by Jeff Byrnes
So everybody’s excited about HTML5, and the native media capabilities it brings; specifically the <video> tag. But at the moment, support is a bit tricky. To quickly reiterate:
- Safari 3.0+ supports H.264 video & AAC audio in an MP4 container
- Firefox 3.5+ supports Theora video & Vorbis audio in an Ogg container, or WebM (VP8 video & Vorbis audio in a Matroska container.)
- Chrome 3.0+ supports both H.264 & AAC in an MP4 container as well as Theora & Vorbis in an Ogg container.
- iOS & Android support H.264 & AAC audio in an MP4 container.
- Opera 10.5+ supports Theora video & Vorbis audio in an Ogg container.
- IE9 will support both H.264 & AAC in an MP4 container as well as Theora & Vorbis in an Ogg container, but IE8 and earlier have no support for HTML5 video, and must rely on Flash.
So, as you can see, things are all over the place. To properly implement HTML5 video, we need to supply two video files: one file encoded with H.264/AAC contained in an MP4, and another encoded with Theora/Vorbis contained in an Ogg. It would also be wise to create a WebM version of your video as well, to future-proof yourself for the day when Theora is deprecated completely.
Now, once you’ve got your video files encoded, the matter of embedding them correctly raises its ugly head. Thankfully, there are a few ready-to-go solutions for this.
First up is Video for Everybody, created by Kroc Camen. VfE serves up HTML5 video (MP4 and either Ogg or WebM) without JavaScript. This is the very first solution put forth for easy HTML5 video support, and, as Kroc himself writes, should in no way be considered a long-term solution. But he’s being very forward-looking, and not very generous with his work. The primary goal with this player is to use no JavaScript, and thus make it as widely compatible as possible (think RSS readers & other JS-disabled avenues.)
Next, we’ve got Video JS, which, true to its name, relies on JS. However, unlike VfE, the controls are consistent between platforms, which is definitely a marked improvement.
The third and, in my opinion, most promising ready-made solution for HTML5 video is SublimeVideo by the gurus over at Jilion. This is a player with not only a consistent UI, but tons of additional features, a full-window mode (and a full-screen version in Safari!), and it’s being neatly packaged up. Unlike the other two, however, it’s still in-progress, and it will only be free for non-commercial use.
So there you have it folks; some readymade HTML5 video solutions; enjoy!
Tags
Comments
Encode FLV Video Files
October 10, 2008 @ 6:10am
Updated — April 7, 2011 @ 10:59am
by Jeff Byrnes
So you’ve got a custom video player for your site (maybe it’s an open source thing, or SlideShowPro, or one a developer built for your needs). The problem with most of those solutions is that they require you to upload videos in the .flv format, which not every video application can just crank out. Of course, if you’re only concerned with catering to those using the Flash browser plug-in’s version 9 and higher, then you can serve up .mov videos in Flash, as long as they are encoded with the h.264 codec.
For those who are tempted with that option, but would like to stay compatible with as many of their site visitors as possible, read on, and you’ll be crunching .flv files like it’s hot.
*NOTE – There may be better free FLV encoders out there (please let us know about them!), but below is at least a couple solutions for those wishing to convert video files to .flv encoded files.
If you have Flash CS3 (for Mac or Windows)
…then you have the Flash Video Encoder application, which can be used to convert a file from .mov to .flv with the following steps;
- Click the “Add…” button
- Click the “Settings…” button if you want to tweak the quality of the encoding, but the default is okay.
- Click the “Start Queue” button
- The video is now encoding to .flv
- When complete, the .flv file should have the same file name, and reside in the same location on your computer as the .mov file.
For more detailed and official information, check out the “Encoding video with Flash Video Encoder” article from Adobe’s Flash Video Encoder User Guide.
If you don’t have Flash CS3 (for Mac)
…then please read the following instructions;
- You must first download an application that will encode .mov to .flv, and luckily there is a free one to use;
- Go to ffmpegX’s download page
- …or go to the direct link for the ffmpegX installer
- Double click the ffmpegX.dmg file
- Drag the ffmpegX.app file to your Applications folder
- Double click the ffmpegX.app file
- Go to http://mjpeg.sourceforge.net/MacOS/ and find the link “mpeg2enc.intel” on the page
- Right-click the “mpeg2enc.intel” link and choose “Save Linked File As…”
- Choose the ffmpegX folder in Applications and click “Save”
- In the pop-up window asking if you want to Save Plain Text, choose “Don’t append”
- Go to this web address; http://prdownloads.sourceforge.net/mplayerosx/ffmpegXbinaries20060307.zip
- Double click the .zip file and move the files to the ffmpegX folder in Applications
- Back in the ffmpegX application’s window, click “Locate” for each of the three sections and choose the ffmpegX folder and locate the specified files
- Click the “Install” button
- In the new window, click “Open…” and locate the .mov file you want to encode
- Back in the ffmpegX window, choose “FLV (Flash Video)” for the Target format’s “To” field
- Go to the “Video” and “Audio” tabs to tweak the quality settings as desired
- The default settings are no good, so at least change the following;
- VIDEO
- Video Bitrate = 800 kbit/s
- Video Size = Use the same dimensions as the existing Quicktime movie (This program doesn’t automatically take care of this for you)
- Autosize = 1:1
- AUDIO
- Audio bitrate = 192 kbit/s
- Sampling = 44100 Hz
- When finished tweaking the settings, go back to the “Summary” tab and click “Encode” in the lower right
- The .flv file should now be created in the same location as the original .mov file.
- Please make sure to change the filename so that the end of the new .flv file, “.mov.ff.flv” gets replaced with “.flv”
The information above was drawn from ffmpegX’s official instructions.
To play FLV files on your computer (for Mac and Windows)
…to check/view the contents of an FLV file;
- Either install Wimpy Standalone FLV Player on your computer
- …or install Eltima’s Free Flash Player on your computer
*NOTE – .flv files will playback in those two programs, but they will not show up in the right dimensions (they’ll stretch to fit the application’s window) with Eltima’s solution. Only Wimpy’s application will show the .flv in the correct video dimenions, and it will do so automatically.
