Embedding html5 video (bonus: or flv flash video)

In the past, we’ve had to use animated gifs or flash to embed video in a web page. Well, we still do kinda – there’s still no way to include a really fully functional file that plays pretty much everywhere like gifs, and flash/java support is pretty clunky and not supported very often. But html5 does include it so if you’re OK with functioning on Chrome/Firefox/IE in any moderately recent version and leaving the people running Internet Exporer 6 under Windows XP, you can use it. It’s considerably smaller than gif (which is a *terrible* format), supports audio and provides better quality and, in most cases, lighter load on the machine playing it.

It’s pretty simple. If your video is in mp4, just upload the file somewhere and put

<video width="788" height="720" controls>
 <source src="sol50.mp4" type="video/mp4">
No html5 video tag support in your browser, sorry.
</video>

in a page somewhere. Change width and height to the appropriate size of the video and sol50.mp4 to the name of the video you uploaded (or full http://…./something.mp4 if it’s on another server). Bam..

This is a screencap of what the google doodle from the other day does if you solve the cube (captured it with ezcap, chosen fairly randoly since the ones I had installed now worked poorly after several windows updates but worked great for me). Someone asking about it prompted me to look this If you’re in a blog type format, that may get changed (this incarnation of wordpress keeps changing it to alternately include a flash version) – I’m tricking it a bit to keep it here supposing that works, but it does function otherwise too like this page.

For more compatibility, you should include an Ogg Vorbis version as some browsers needing to follow strict licencing standards do not support mp4 (a proprietary format you can’t support in software any way you’d like) but do support Ogg (a free format anyone can implement). Also, if your video isn’t in mp4, you need to convert it to that. In my particular case I needed to do both – ezcap just shoves the captured file in a wmv file in Documents\ezcap\projects\(a number)\media\(an uuid).WMV. You can convert it with anything that supports it, but I used ffmpeg, as it’s free and open source and very good (supports lots of formats).

It is a command line tool though, so nothing to click on and stuff. To use it, after you’ve installed it somewhere, go to a command prompt (or shell prompt in linux/mac) wherever your video is and do

ffmpeg -an -i input_video.wmv -b:v 150k sol50.mp4

The “-an” here means “Do not include audio”, if the video does have audio and you want to include it, skip that. “-i” is simply the input video, sol50.mp4 at the end is the output video and since it’s named .mp4, it’ll assume you’ll want it converted to an mp4. The -b:v 150k means I’m saying to use a bitrate of 150 kbit/s, which is a fairly low rate. The file size will here be around 400kb, but quality will be somewhat questionable. You can set this to something else or just not put anything to use some default (Depends on source file I think, seems to shoot for ~400k in my particular case) or specify something higher. To convert to ogg, do the same thing again but with .ogg instead of .mp4. It doesn’t seem to pay attention to -b:v, I didn’t really dig deeper into it since it’s kind of a fallback.

Include it in your tag as well, like

<video width="788" height="720" controls>
 <source src="sol50.ogg" type="video/ogg">
 <source src="sol50.mp4" type="video/mp4">
No video tag support.
</video>

..and there you go. You can run “ffmpeg -h” for a list of other commands, including “ffmpeg -encoders” / “ffmpeg -decoders” to list what it can encode/decode (it’ll vary depending on your build and version, there are several in rotation since it’s on many platforms and it’s always pretty contentious legally which formats you’re allowed to support in a piece of software without paying licencing fees to someone). It’s a very powerful little program and includes everything it does in itself (no external codecs and such), but can be a little unwieldy. VLC Media Player has a graphical user interface (you get to click on stuff), is based on many of the same libraries and can do many of the same things. It’s another option that can be a little simpler. However, it’s not *that* much simpler since it includes so many different options (despite it’s GUI, it’s quite a power tool in it’s own right). Adobe Premier can do some of it (if you were editing it heavily anyway) but then you probably know your software pretty well if you’ve takien it to those extremes. I’m sure there’s lots of more friendly options (that video editor that comes with windows? Whatever pops up when you google “free video converter”?) but I don’t have any serious recommendations. If you have a codec stack installed already, such as Shark007, CCCP or K-Lite (do NOT install two of them or all three – chaos will ensue. Pick one, if you need to add stuff it doesn’t support uninstall it and install another or install individual extra codecs) you may be able to use virtualdub, though most builds are for avi only unfortunately and even though it’s an old favorite of many of us for quick converts/light edits it’s becoming a bit obsolete with all the new formats flying around.

If you want to include a flash player version, you’ll need to convert it to that and link up a player somehow, might write up a little more specifically how to do that if I get to it. The installation of wordpress I’m using seems to auto-do that with tinyMCE and Moxieplayer by Moxiecode. But then you’re a ways out of just tinkering with html. There are some easier (and still free and open source) alternatives, like flv-player. Actually, you know what, let’s go over that too instead of me forgetting to do another post later.

Do the video conversion as above, but instead of .mp4 and/or .ogg, add .flv. This will get you a third (or.. a, if you didn’t do the other two) version in .flv, adobe flash video. Upload it to wherever you’ll be hosting it however you usually do that (add media, sftp to your site, some web interface, etc). Figure out where it got hosted (i.e. obtain the URL ,like ‘http://www.nothisisipatrik.com/videoexample/sol50.flv’ here, where people could download it). Then go to flv-player.net and pick one of the versions you think looks good (I used the mini this time). Click on generator, enter the URL and other paramaters. It’ll give you a block of code to include in your page (or to replace the “You do not have html5 video” line with), looking something like this

<object type="application/x-shockwave-flash" data="http://flv-player.net/medias/player_flv_mini.swf" width="788" height="720">
<param name="movie" value="http://flv-player.net/medias/player_flv_mini.swf" />
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="flv=http%3A//www.nothisispatrik.com/videoexample/sol50.flv&amp;width=788&amp;height=720" />
</object>

Jam that on a page and you’re done. Example page. As you may notice, you’re hotlinking to flv-player.net for the actual player (i.e. the player itself is being downloaded from them, not your site). If you’d like to host the player yourself too (so that it’ll be there even if flv-player.net is down, inaccessible or has moved – not especially likely, but hey, you never know) click Download in the same menu as Generator on the sidebar, right click the player and select Save link as.. Upload that to wherever you want on your site, rewrite the block from generator to replace the two (Yes, there are two. Replace both.) “http://flv-player.net/medias/player_flv_mini.swf” with the one on your site. Now it’ll load the player itself (a little 4.5 kb .swf) from your site. Example of this. flv-player.net is likely more stable than you are though, so it’s probably not needed. However, if you want it to work offline or you’re planning on having this site up for decades (possibly moving/archiving it now and again, having it faithfully show something like your daughters first bike ride every other year), go ahead and throw in the player with it – it’s tiny anyway and you won’t have to worry until flash becomes obsolete and unavailable. Which, I guess, is next Thursday unless it was last year, but that’s another can of worms – data archiving is harder than it seems.

If you’d like to triple platinum safeguard that *something* shows up, you could also make a gif and include that (example gif) as a <img src=”somewhere.gif”>. I did so with Photoshop. I opened the video in it, trimmed start/end a bit and did Save for web, changing type to .gif. Since I wanted it to be on imgur (didn’t feel like hosting it in case it got passed around too much. In hindsight I’m not sure I care, was more of a quick thing that then became a not-so-quick thing getting back up to date) I had to go another step and reduce the number of colors pretty massively (to 8 colors), which there’s no super straightforward way to do in photoshop (that I know of). Might write another post about that after this too (again, now and forever, if I get to it). Even in a good situation, such as this one with lots of whole single color fields, it became 1.2 Mb and more like 5 Mb with no palette tweaks (four to thirteen times the mp4).

You could also use an online service like gfycat.com, which does a pretty decent job and provides html5 + gif versions, though with some limitations. You know, if you wanna be a big sissy about it :-). It came in at around 5 Mb for gif, with defaults, though. They do host it, which is nice if you’re hurting for bandwidth. Example (html5 video), Example (gif). Odds are you’ll perpetually hunt for free service that matches your current case and hasn’t changed since last time you were there though (started adding logos/watermarks, changed acceptable file sizes or lengths, folded altogether, etc) so it kind of makes sense to learn how to do it “the real way”.

Leave a Reply