Behavior, Content, Money – 3 Things you should never give away for free!!!

BCmoney MobileTV

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

Posted by bryan on September 22, 2010 in HTML, Mobile, Multimedia with No Comments


No Gravatar

HTML5 video icon

Image via Wikipedia


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:

  1. If animated GIFs can be used to show an animation before the video plays? (Answer #1)
  2. 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.

Answer #1

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…

Answer #2

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. 

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <title>HTML5 Video with Flash and Download fallback</title>

  <!--[if lt IE 9]>

     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

  <![endif]-->

  <style type="text/css">

      header, section, footer, aside, nav, article, figure, audio, video, canvas { display:block; }

      img { border:0; vertical-align:middle; }

  </style>

</head>

<body>

<div id="movie">

  <video id="movie_html5" width="320" height="240" preload controls>

    <source src="video.webm" type='video/webm; codecs="vp8, vorbis"' />

    <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"' />

    <source src="video.mp4" />

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="movie_object" name="movie_object" width="320" height="240" type="application/x-shockwave-flash" data="player.swf"> 

      <param name="movie" value="player.swf" />

      <param name="wmode" value="transparent" />

      <param name="allowfullscreen" value="true" />

      <param name="allowscriptaccess" value="always" />

      <param name="flashvars" value="file=video.flv&image=video.jpg" />

      <embed type="application/x-shockwave-flash" id="movie_embed" name="movie_embed" 

             src="player.swf"

             width="320"

             height="240"

             bgcolor="#000000"

             allowscriptaccess="always"

             allowfullscreen="true"

             wmode="transparent"

             flashvars="file=video.flv&image=video.jpg">

        <noembed>

          <!-- Java Applet OGG player, see: http://git.xiph.org/?p=cortado.git;a=blob;f=README -->

          <applet id="movie_java" name="movie_java" code="com.fluendo.player.Cortado.class" archive="http://theora.org/cortado.jar" width="320" height="240"> 

            <param name="url" value="video.ogv" />

            <param name="autoPlay" value="false" />

            <!-- Mobile stream (Image can be an Animated GIF for playback with no sound) -->

            <div id="movie_mobile">              

              <a href="video.3gp"><img alt="PLAY" src="video.gif" width="320" height="240" /></a>

            </div>

          </applet>       

        </noembed>       

      </embed>

    </object>

   <!-- JW Silverlight WMV player -->

    <div id="movie_silverlight" name="movie_silverlight" style="display:none; position:relative; top:8px; left:8px;">&nbsp;</div>

    <script type="text/javascript" src="silverlight.js"></script>

    <script type="text/javascript" src="wmvplayer.js"></script>    

    <script type="text/javascript">      

      var hasSilverlight = Boolean(window.Silverlight);

      if (hasSilverlight) {

        var cnt = document.getElementById("movie_silverlight"); //media container

        cnt.style.display = 'block';                           //show Silverlight

        document.getElementById("movie_object").style.display='none'; //hide Flash, Java and Mobile

        var xaml = "wmvplayer.xaml";                            //XAML player

        var cfg = { file:"video.wmv", image:"video.jpg", width:"320", height:"240" }; //configure WMV file, preview thumbnail, width/height

        var ply = new jeroenwijering.Player(cnt, xaml, cfg);

      }

    </script>

  </video>

  <!-- Offer direct download link to play in Browser plugin or allow System default Media Player to take over -->

  <p>

  Download: <a href="video.mp4">MP4</a> | <a href="video.webm">WebM</a> | <a href="video.ogv">Ogg</a> | <a href="video.3gp">3gp</a> | <a href="video.flv">Flash</a> | <a href="video.wmv">WMV</a>

  </p>

</div>

</body>

</html>
DEMO

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
IE

Market share: 45.3%
1 – 4           y  
5         y y  
6       y y y  
7       y y y  
8       y y y  
9+ y     y y y  
Windows Phone       y      
Firefox

Market share: 31.7%
1         y y  
2         y y  
3       y y y  
3.5   y   y y y  
4+   y y y y y  
Fenick   y          
Safari

Market share: 5.8%
1 – 3         y y  
4+ y     y y y  
iPhone y            
iPod y            
iPad y            
Chrome

Market share: 11.9%
1 – 3         y y  
3 – 6 y     y y y  
6 – 10 y y y y y y  
10+ y   y y y y  
Android 1 – 2.3         y y  
Android 2.3 – 2.9 y   y   y y  
Android 3+ y y y     y  
Opera

Market share: 1.7%
1 – 9         y y  
9 – 10.5       y y y  
10.5+   y y y y y  
Opera Mobile           y  
Mobile Device browser

Market share: ~50% (of mobile device owners, large overlap with above stats)
Blackberry 1-5             y
Blackberry 5-10           y y
Blackberry 10+         y y y
Nokia Symbian 1-7             y
Nokia
Symbian
7.1+		         y   y
WAP Browser             y

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

« previous post

Pipe dreams…">

Some may think, sure... online video. Sure... Mobile TV. Hah, like that's really gonna fly...

next post »

Resurrecting the Google SOAP API">

I know what you're thinking, Let Sleeping Corpses Lie right? Well let me first star...

You may follow the RSS 2.0 feed. You can leave a response or a trackback.

Leave a Reply

No trackbacks yet.

No post with similar tags yet.

Posts in similar categories

BC$ = Behavior, Content, Money

The goal of the BC$ project is to raise awareness and make changes with respect to the three pillars of information freedom - Behavior (pursuit of interests and passions), Content (sharing/exchanging ideas in various formats), Money (fairness and accessibility) - bringing to light the fact that:

1. We regularly hand over our browser histories, search histories and daily online activities to companies that want our money, or, to benefit from our use of their services with lucrative ad deals or sales of personal information.

2. We create and/or consume interesting content on their services, but we aren't adequately rewarded for our creative efforts or loyalty.

3. We pay money to be connected online (and possibly also over mobile), yet we lose both time and money by allowing companies to market to us with unsolicited advertisements, irrelevant product offers and unfairly structured service pricing plans.

  • Pages

  • Archives

  • Categories

  • Meta

    • Powered by WordPress And Hulozila

    Switch to our mobile site