• Discussions
• Categories
• Help / Tutorials
• Talk to the Team
• Developing with SesameVault
• General Discussion
• Search

Vanilla 1.1.5 is a product of Lussumo. More Information: Documentation, Community Support.

1. • CommentAuthorMichael Rabinovich
   • CommentTimeSep 28th 2009 edited

    
   As we have espoused many times before, the SesameVault Player is special. Unlike your standard Flash player embed, the SV Player automatically detects your users' devices, platforms, and connection speeds in order to deliver them a high quality encoding that's compatible with whatever they're accessing your videos from. The purpose is so you can publish your videos once, and your users can accesses them using browser-based Flash players, iPhones, Blackberries, Nokias and a variety of other popular mobile devices.
   
   But what if you want all the benefits of the SesameVault Player and you want to use your own or a third party custom Flash player? This is something that many of our customers have requested over the past few months. In this post I'm going to show how you can use your own custom Flash player and still support non-Flash clients like the iPhone and iPod touch. This example shows you how to set up a file like this one you can see live in action (try it on your iPhone too).
   
   Related links: Playing media in a custom Flash player example download from the SesameVault developer page.
   
   Lets start with how to support the iPhone and iPod touch. For serving media to the iPhone and iPod touch we have a very powerful and convenient method called qtmobile_reference. When this special Quicktime reference movie is requested from SesameVault, a special mov movie file is returned. This mov then detects the client connection speed (EDGE/3G or WiFi), which is relayed to SesameVault, which in turn serves the appropriate encoding to the client. The benefit of using this method is that all of these steps are done synchronously on the back-end during the single request.
   
   When you request the qtmobile_reference mov it gives you back the right video encoding based on the connection speed of your iPhone/iPod touch user.
   
   Here is the method in action (notice no sig on this url: its because this other video is public):
   
   http://stream.sesamevault.com/v2/media/qtmobile_reference/a5b94e5c-5200-11de-b9af-00163e681479.mov
   
   Lets begin by setting up the php file that will be the basis of the example. This php file will also include a little bit of JavaScript. We will use a specific video with the id d6c558ec-18a8-11de-8c8f-0019b9e9b99a thats actually live in a SesameVault account.
   
   We'll include the php library, and then set up a SesameVault session. You'll notice that I've done this using an appropriately permissive API key username & password. I do not programmatically generate the key pair in this example like some might want to do, I simply use a pre-generated pair I created in my Account section of the manager app.
   
   include("sesamevault_api.php");
$media_id = "d6c558ec-18a8-11de-8c8f-0019b9e9b99a";

$username = "a0c053f985df72947a041ce416e638eb109119f0";
$password = "90d77e33972118e9dc28e17ac09dd781d487ab56";

$sv = new SesameVault($username, $password);

   
   Next, lets retrieve the urls we'll need for accessing the actual video encodings and thumbnail. We will use the media->show method to first grab the metadata about the video.
   
   $media = $sv->media("show", array("id" => $media_id, "include_formats" => true));
$media_title = $media['title'];
//Grab the thumbnail
$format = $media["format"]["thumbnail"];

   
   Now, we need to make sure that when we request the thumbnail that the request is authorized, otherwise it will fail. Lets append the appropriate signature with the add_sig_to_url method.
   
   $thumbnail_uri = $sv->add_sig_to_url($format['uris']['http']);

   
   This will show the thumbnail on iPhones, iPod touches, and devices that don't have Flash. We tend to regard devices that don't have Flash as mobile devices, so lets size the thumbnail appropriately. Giving the thumbnail address a width parameter will get the server to return the right size:
   
   $thumbnail_uri = $thumbnail_uri . "&width=200";

   
   Lets grab the best available encoding for high quality Flash playback. The method to use for this is format_info_by_category.
   
   $encoding_format = $sv->media('format_info_by_category', array("id" => $media_id, "category" => "mp4"));
$hirez_video_uri = $sv->add_sig_to_url($encoding_format['uris']['http']);

   
   Now, lets grab the best 3GP encoding to use as a fallback for supporting devices that 1) don't have Flash and 2) are not an iPhone or iPod touch:
   
   $encoding_format = $sv->media('format_info_by_category', array("id" => $media_id, "category" => "3gp"));
$lorez_video_uri = $sv->add_sig_to_url($encoding_format['uris']['http']);

   
   Next, lets setup the qtmobile_reference call I described at the beginning of this post. Once again, this mov detects the connection speed (EDGE/3G or WiFi) of iPhone and iPod touch users. The connection speed defines which encoding SesameVault will serve.
   
   $qt_mobile_address = $sv->server("stream")."/v2/media/qtmobile_reference/".$media_id.".mov";

   
   Now, for this request we have to create a persistent signature, because the iPhone and iPod touch use many byte range requests that all need to be authorized with the same signature. We pass in a second argument for setting persistence to true. Read more about persistent signatures here.
   
   $qt_mobile_reference = $sv->add_sig_to_url($qt_mobile_address, true);

   
   If the client doesn't have Flash or an iPhone or iPod touch, show them a thumbnail link to a fallback encoding:
   
   $fallback_format_html = "<a href="&quot;.$lorez_video_uri.&quot;"><img src="&quot;.$thumbnail_uri.&quot;" alt="" /></a>"

   
   We are done with the php prep work. Now lets finish our page. Lets include the swfobject.js file to handle our Flash embed code. Also, go ahead and include the Flash detector swfobject.js I will describe soon.
   
   <script src="swfobject.js" type="text/javascript"></script>

   
   For fun, lets show the title of the video:
   
   <h1><?=$media['title']?></h1>
   
   Next, lets look at the user agent string. If the client is an iPhone or an iPod touch we show a thumbnail. We wrap the thumbnail in a link to the qtmobile_reference movie.
   
   if(navigator.userAgent.indexOf('Mobile') != -1 && navigator.userAgent.indexOf('Apple') != -1) {
document.write("


<h3>iPhone &amp; iPod Touch</h3>


");
document.write("<a href="\">\"&gt;<img src="\" alt="" />\"&gt;</a>")
}

   
   If its not an iPhone or iPod touch it could also be a Flash-enabled client. Enter swfobject - a JS wrapper for embedding Flash on your page written by Geoff Stearns. This object works like this: make a div with id="flashcontent" and then create a new SWFObject. If the client has Flash, the contents of the div will be replaced with the Flash embed code. Otherwise, the contents of the div remain as they are.
   
   At this point in the code's execution, iPhone and iPod touch are ruled out. So we need to show either a Flash embed or a link to the fallback encoding. Lets put the fallback code inside the flashcontent div. This is simply another thumbnail wrapped in a link. However, the link is to the low rez 3GP movie.
   
   else {
document.write("

<div id="\&quot;flashcontent\&quot;">"+""+"</div>
");
var so = new SWFObject("example.swf", "example", "640", "400", "9.28", "#336699");
so.addVariable("media_id", "");
so.addVariable("username", "");
so.addVariable("passwrd", "");
so.write("flashcontent");
}

<noscript>
<h3>Fallback (no javascript)</h3>
</noscript>

   
   That's all there is to it! Using this approach (fully-fleshed example code is linked below) you can use your own custom Flash player and still support non-Flash clients like the iPhone, iPod touch, and other mobile devices. As our buddies over at Crain Communications say, "in this day and age, the ability to view video content on the iPhone and iPod Touch is more of a requirement than a nice-to-have." And they put their money where their mouth is when they launched their new Creativity-Online site powered by SesameVault. You do this and your users are going love you and your content even more. We promise.
   
   See the example in action by going to this page on your browser or a mobile device.
   
   Download all the source files, including Flash player used in this example here.