Bluish Coder

Replacing video controls using a bookmarklet

Update: Chris Blizzard has a neat screencast showing the bookmarklet and player replacement in action.

There's been some interesting demo's of <video> usage and manipulation discussed in the TinyVid Feedback comments section.

One user, hansschmucker, has done some nice demonstrations of what <video> can offer.

For example, this bookmarklet can take a TinyVid video and replace the player using the built in controls with one written in JavaScript provided by the bookmarklet. The new interface includes seeking, play, pause and volume control. It looks very nice.

To use the bookmarket, visit the bookmarklet page, click on the button that appears there and bookmark the resulting page. Next visit a TinyVid video and visit the bookmarklet. The built in player will be replaced by the new one. This will also work on many pages that use video using the built in controls, for example this transparency camp video.

This example show's it's possible for users to create and customize their own video players and use it on sites of their choice which is pretty nice.

hansschmucker also provided some demo's of using <video> with <canvas> that allow you to view a video in 3D using red/cyan glasses. I've copied his comment from the feedback page below:

Using VIDEO as data source for 3D

I just wrote a little demo to demonstrate how powerful VIDEO elements can be as data source: This little script (it's 20 lines for god's sake) uses a video (which was also produced via JS by the way, thanks to Radiohead's choice of using simple CSV for the data, the power of Canvas and a bit of base64 decoding) to offset pixels in a randomly generated noise map, saving the original map as red and the altered image as red/blue.

You just have to get out your red/cyan glasses and you'll be able to enjoy the video in 3D. Lots more could be done with proper optimization (in fact, the whole thing may be done as a set of SVG filters) and just a little more attention to detail (random noise is possibly the worst thing you can use for a map), but it's still amazing how easily you can create something amazong with VIDEO. ... Two more variants: uses a prerendered noise (looks much better) and warps the source image itself which probably makes most sense here.

tinyvid.tv updates

I did some minor tweaks to tinyvid.tv recently. I added the ability to add comments to video pages, and add feedback on the site. This uses Intense Debate, a third party commenting engine.

On the video front I added a page to return a random video from those available. The video pages themselves show the duration, download progress and current playback position if the browser supports the relevant events. These should work in the latest Firefox nightlies, maybe with the exception of 'download progress'. The latter works well with the patch from bug 464376 applied. That bug should be resolved soon - it just needs tests written and handle the case of local files (those not served over HTTP).

File uploads are not yet supported. For uploads I imagine I will need to work out a way of moderating/screening the uploaded videos. Even without this functionality the site still has almost 200 videos available for testing the HTML 5 <video> element.

User Authentication - OpenID and Facebook

I'm still looking at the different options for tinyid to handle registration and authentication of users. My recent change added logging in using your Facebook account using Facebook Connect. Another option I'm considering is OpenID.

There's a good blog post comparing the Facebook vs the OpenID stack. The same weblog has a post on using OpenID in a popup without leaving the page, similar to how Facebook Connect does its magic. You can see a demo of this concept in action.

Fallback options for HTML5 video

The HTML5 <video> element only works on a few, often bleeding edge, browsers. For tinyvid I've been only supporting this subset of browsers. Recently I put in support for a simple fallback option for other browsers.

In browsers that don't support <video> the element is ignored. The contents of the element are still processed however. This means any HTML elements within <video>...</video> will display to the user on those browsers. The most basic fallback option is to tell the user that their browser doesn't support video:

<video>
  <p>Sorry, your browser doesn't support the video element
</video>

In my blog in the past I've used the video element to display the Theora video, and fallback to a YouTube hosted video if the browser doesn't support it. This was done with code like:

<video src="/video_bling.ogg" controls>
  <object width="425" height="350">
    <param name="movie" 
              value="http://www.youtube.com/v/vvtdkxCIKC8"></param>
    <embed src="http://www.youtube.com/v/vvtdkxCIKC8" 
              type="application/x-shockwave-flash" 
              width="425"
              height="350"> </embed> 
  </object>>/video>

On <video> enabled browsers this uses built in support. On others it uses the Flash player to play the YouTube video.

It's possible to play Theora videos using a Java Applet called Cortado. This can be used as a fallback for users that have Java support but no HTML5 video support:

<video src="test.ogg" controls>
  <applet code="com.fluendo.player.Cortado.class" 
             archive="cortado.jar" 
             width="320"
             height="240">
    <param name="url" value="test.ogg"></param>
    <param name="duration" value="229.015"></param>            
  </applet>
</video>

The Cortado applet cannot be used for video's hosted on another domain however. They must be on the same domain as that serving the cortado applet.

These fallback options don't allow creating your own controls with JavaScript and using the nice HTML5 media API. They work best when you only want a single fallback option and use the built-in controls.

There are JavaScript libraries that can be used to emulate the HTML5 media API. Or you can write a simple wrapper to do this yourself. The basic approach is to use <video> in your page and insert a JavaScript file at the top. When loaded this fill searches the document for usages of <video>. It detects what capabilities the browser has (native video support, Flash, Cortado, mplayer/vlc plugin, etc) and replaces the <video> element with the correct HTML code to instantiate the fallback. The JavaScript can then create a wrapper object that emulates the HTML5 API and calls the underlying plugin methods, etc if possible.

Examples of this type of library can be seen in use:

• mv_embed
• Xiph.org presentations
• Steal This Footage

I've added very simple fallback to tinyvid using the Cortado applet. If the browser doesn't support <video> it displays a link the user can click to go to a page that uses the applet. The server decides whether to use native video or the applet depending on a URL parameter.

Testing Facebook Connect Locally

I've been experimenting with integrating features from the social networking site Facebook into tinyvid. To do this I'm using the 'Facebook Connect' API.

When you register a Facebook application you need to provide URL's to your application's site so Facebook knows where to send the user on redirects from logging in, and handle messaging between Facebook and your application.

To handle the case of being able to develop and test on a local server, and deploying to the live server. This is the 'Callback URL' setting in the application setup. This can contain an IP address and port number so for testing locally you can set it to a local IP address. For example, http://127.0.0.1:9000.

Facebook doesn't try to contact this directly, it redirects the browser to it, so this works fine when testing the application locally. You can create two applications, one with the testing Callback URL, and one with the production one, and make this a parameter in your application.

Another option that worked for me was to set the Callback URL to the production domain (in this case, tinyvid.tv) and locally set my hosts file so that tinyvid.tv resolved to localhost. The web server needs to run in port 80 locally for this to work.