HTML5 with animated GIF, and, real-time transcoding?!

In the recent Dive Into HTML5 Video with the Masters instructional webinar from ReelSEO, the final questions posed were whether the masters (Jeroen Wijering of Longtail video, and Philip Jagenstedt of Opera software) knew:
- If animated GIFs can be used to show an animation before the video plays? (Answer #1)
- When will HTML5 be ready for primetime? (Answer #2)
While some quick experimentation answered the first question for me, the second question is more of an opinion question than a factual right or wrong one.
The following shows an example of playing a video using an animated GIF as the poster:
(NOTE: the video used in the demo is not meant to go with the actual image, I just picked a random funny Animated GIF!)
The code for this is quite simple:
<video id="movie" width="320" height="240" poster="video.gif"> <source src="video.mp4" /> <source src="video.ogv" /> <source src="video.webm" /> </video>
Just as you might expect, you simply place it in the poster attribute of the <video> tag itself. This could have lots of uses for image previews, rollovers (by dynamically changing the value of the poster attribute using JavaScript), and possibly even playing back the entire video without sound for some devices that still don’t support HTML5 video. In some cases you could even combine an Animated GIF with the HTML5 <audio> tag or another audio playback method for those odd cases such as legacy Mobile Devices or old decrepit browsers like IE which simply can’t support the <video> tag at all… though for those, using a Flash fallback like JW, FlowPlayer or VideoJS can be another alternative.
The animated image itself could be generated by taking snapshots of the video at various time intervals, and combining them into a single animated GIF image using a graphics library like ImageMagick or FFMPEG. All of this would happen automatically upon upload of a new video file. This “real-time encoding of the poster image” concept gave me an idea for a service which could solve what is IMHO one of the most significant problems for HTML5 video adoption, bringing me to my next point…
To answer question #2: “is HTML5 ready for primetime?”, I would simply point to the increasingly common use of the new video tag (see DailyMotion, Vimeo, and YouTube), proving it is indeed almost ready for primetime.
The only thing holding HTML video in particular back, is a common denominator video container/codec format. The use of MP4 with a Flash fallback is already enough for supporting a pretty wide array of browsers, and its mostly mobile devices other than the iPhone that we have to worry about for specific implementations. If you want to avoid encoding in multiple formats (i.e. MP4, WebM, Ogg Theora, 3GP and 3GPP), then your best bet is to use a direct-link fallback, which will work for those devices which can’t render the <video> tag yet, but can possibly play MP4. The only thing that bothers me about MP4 (ok there’s a few other things too, such as the questions still surrounding licensing despite the MPEG-LA group’s attempts to reassure the public they will never enforce fees) is that within the container itself, there are several different profiles and codec combinations, and so, you still won’t be guaranteed that you do support many mobile devices other than Apple products.
So what’s the best alternative then? Possibly WebM, but with Google‘s ever growing hold on the entire internet industry, it makes that option less and less attractive (although I certainly appreciate the premise of the project). More likely, I think what we need and will see soon enough is a real-time conversion tool or service, to which we can POST videos as they are needed, which will serve the video in the desired format, on-demand.
For example, we send a POST containing our MP4 video named “coolvideo.mp4” to http://video.org/convert along with a to parameter, a width parameter, and a height parameter (with some sample values being to=ogg&width=600&height=400 for playback in FireFox on a laptop, or to=3gp&width=320&height=240 for playback on a mobile device) then, we get back a temporary link to stream the created video. After the stream disconnects (or the player closes the page or navigates to another video), the temporary URL and video could be deleted. Such a real-time transcoding service would surely solve most of the problems for secure video playback on the web, and it could either be run as a 3rd party Web Service with remote authentication, or, delivered as an open source package which can be run alongside an existing library like FFMPEG on your own servers.
The important thing to note, and indeed the reality check for this idea, is that conversion takes time as does passing the video between servers, so it may be impractical for now; but the idea holds some water, internet speeds are increasing day by day, and things that were thought impossible only a few years ago are now possible on today’s World Wide Web. Since HTML5 video is about 2-5 years away from becoming a de facto standard for video on the web, a lot changes in a few years time, so I wouldn’t dismiss the possibility of real-time video encoding just yet. The promises are quite great, in that publishers would only have to choose one format for all of their videos and still be able to push that video to just about any browser or device in near real-time (today; with fast connections, optimizations and parallel processing, a relatively short video could be transmitted to an encoding service, encoded and delivered to the user in about as much time as it used to take to load and buffer an online video about 5 or 6 years ago).
Either way, if anyone wants to help undertake the building of some kind of real-time encoding tool like this, I’d definitely be interested. Also, if you know of anything that already does this, or anything under development, please let me know. I’ve put together my best attempt at a universal HTML5 Mobile-compatible video.
[snippet id=63451]
For convenience sake, I’m also going to include a table summarizing the current state of HTML5 and which types of video playback are supported by which browser versions and devices (WARNING: this summary could be subject to errors or omissions, so please comment if you think I got one of the support types wrong):
HTML5 MP4 | HTML5 Ogg |
HTML5 WebM |
Silverlight | Flash | Java | 3GP | |
![]() Market share: 45.3% |
|||||||
1 – 4 | ![]() |
||||||
5 | ![]() |
![]() |
|||||
6 | ![]() |
![]() |
![]() |
||||
7 | ![]() |
![]() |
![]() |
||||
8 | ![]() |
![]() |
![]() |
||||
9+ | ![]() |
![]() |
![]() |
![]() |
|||
Windows Phone | ![]() |
||||||
![]() Market share: 31.7% |
|||||||
1 | ![]() |
![]() |
|||||
2 | ![]() |
![]() |
|||||
3 | ![]() |
![]() |
![]() |
||||
3.5 | ![]() |
![]() |
![]() |
![]() |
|||
4+ | ![]() |
![]() |
![]() |
![]() |
![]() |
||
Fenick | ![]() |
||||||
![]() Market share: 5.8% |
|||||||
1 – 3 | ![]() |
![]() |
|||||
4+ | ![]() |
![]() |
![]() |
![]() |
|||
iPhone | ![]() |
||||||
iPod | ![]() |
||||||
iPad | ![]() |
||||||
![]() Market share: 11.9% |
|||||||
1 – 3 | ![]() |
![]() |
|||||
3 – 6 | ![]() |
![]() |
![]() |
![]() |
|||
6 – 10 | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
10+ | ![]() |
![]() |
![]() |
![]() |
![]() |
||
Android 1 – 2.3 | ![]() |
![]() |
|||||
Android 2.3 – 2.9 | ![]() |
![]() |
![]() |
![]() |
|||
Android 3+ | ![]() |
![]() |
![]() |
![]() |
|||
![]() Market share: 1.7% |
|||||||
1 – 9 | ![]() |
![]() |
|||||
9 – 10.5 | ![]() |
![]() |
![]() |
||||
10.5+ | ![]() |
![]() |
![]() |
![]() |
![]() |
||
Opera Mobile | ![]() |
||||||
![]() Market share: ~50% (of mobile device owners, large overlap with above stats) |
|||||||
Blackberry 1-5 | ![]() |
||||||
Blackberry 5-10 | ![]() |
![]() |
|||||
Blackberry 10+ | ![]() |
![]() |
![]() |
||||
Nokia Symbian 1-7 | ![]() |
||||||
Nokia Symbian 7.1+ |
![]() |
![]() |
|||||
WAP Browser | ![]() |
UPDATE (2012-02-21):
I’ve known about Encoding.com for a long time now, and even recently tweeted about it being the real-deal in terms of it being able to answer just about anyone’s Encoding needs. However, flying under my radar this whole time, was their sister service Vidly. Although still not quite real-time it is an interesting service, and if I was developing a new mobile video solution I would definitely consider offsetting bandwidth, encoding and storage to either Vidly or another video delivery service like BitsOnTheRun, vzaar or Brightcove. The topic of video hosting providers is another post in and of itself, so before I get ahead of myself I’ll just summarize what I know about each in one line:
- Vidly – seems to be the closest to real-time encoding; supports the most formats and devices
- BitsOnTheRun – best starter package for small businesses, allows use of Amazon S3 and other cloud storage solutions
- Vzaar – best mid-tier option for high bandwidth but low storage requirements; supports audio as well as video
- Brightcove – widely used by Newspapers, TV and other media companies; famous for Enterprise-grade support and scalability
Related Articles
- The State of HTML5 Video REPORT (longtailvideo.com)
- Animated GIFs in Your Email Marketing (sendblaster.com)
- How to Create Animated GIFs With Your Smartphone (mashable.com)
- Make an Animated GIF in Seconds (helpdeskgeek.com)
- How to Convert a Video File into an Animated GIF (lockergnome.com)
- Burberry use their ‘Tweetwalk’ feature for a second time during LFW with preview animated gifs (ukmaghag.wordpress.com)
