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.

Categories: facebook, openid, tinyvid

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>pSorry, your browser doesn't support the video element<p>
</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. Here's a link to a native video player, and the applet version:

• Native Video
• Cortado Applet

For the applet version the server queries the Ogg file for the width, height and duration of the video so it can embed that data in the applet parameters. In some cases I can't get the width and height. This is due to some of the videos being stored on backup storage (via Amazon S3) and I can't locally analyze it to get the data. In that case the applet dimensions are set to 320x240.

Categories: video

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.

Categories: facebook