• 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
   • CommentTimeOct 8th 2008 edited

    
   SesameVault encodes your uploaded video and audio into many encodings that work on most computers and mobile devices out there. But how do you pick which encoding to present and in which player to present it? Enter the Universal Player.
   
   Embedding video and audio in websites and applications is a common desire yet continues to be complicated. Users arrive at the embedded video on different clients (browsers) that run on different platforms (windows pc, symbian, etc.) Sometimes the embedded video player isn't supported on their combination of client/platform. This is why the most versatile video/audio player is desired. Flash is versatile, but only works on Mac, PC, and some Linux platforms. Mobile devices present a new challenge: most of them don't support Flash and if they do it is often a version of Flash too limited to play video.
   
   Besides the question of which player to user has, there is an additional headache regarding which encodings of the video/audio their device can handle. BlackBerry mobiles play back AVIs, while iPhones play mp4 files. Older Flash players play h263 flv files, while new ones can handle h264 mp4s. The fist challenge is just getting the media encoded into all these. The second challenge is picking the right encoding to deliver. Luckily, SesameVault automatically encodes uploaded media to all relevant encodings. To pick which encoding to serve and in which player to serve it in we present the Universal Player: the only media embed you need to reach all devices out there.
   
   The Universal Player detects the platform and the client the user is using, and serves up the best combination of player and encoding. This eliminates a whole class of problems for developers and media publishers. Not only can you stop worrying about making sure you have the right encodings, you can stop worrying about picking the right one to display. The problem of picking the right encoding and player is big enough that some publishers are simply forced to limit the spectrum of devices they support, thus limiting their audience. Together with SesameVault, the Universal Player removes this pain.
   
   The Universal Player keeps a priority list of encoding & player combinations for each platform and client and does the dirty work of making the right decision for you. A user visiting a page with a UP on it simply has working video/audio - all the hard work the UP is doing is behind the scenes. Imagine a spectrum of video as it could appear on the web: high quality HD video in fullscreen, to a small lightweight scrubbable player, to a mere video thumbnail that is a download link to the video itself. The UP can present each video in your library in each of these configurations. So if you land on the embed with a bare bones mobile platform with not even progressive download playback capability, the UP embed will degrade to a mere thumbnail link to download. In the end: your embed simply works - to whatever degree the device can possibly allow.
   
   Additionally, the Universal Player is customizable. In the Share sub-tab of your Vault you will find the UP generator. You will also find advanced options that let you control its size, behavior, and security options. Its controls are made with HTML and CSS and talk to the player via a Javascript bridge. Adding your own control bar styled with CSS and HTML becomes straight forward (read more here for an example). You can also tap into the JS Bridge directly and control the player with your own code.
   
   We invite you to use this embed and let us know what you think.
2. • CommentAuthorjondoe
   • CommentTimeOct 13th 2008

    
   are you going to make the universal player embeddable directly and not
   called via a javascript tag? our player page is really complicated,
   tons of js already, and including a js tag to make it embed the player
   is probably going to be a deal breaker.
3. • CommentAuthorMichael Rabinovich
   • CommentTimeOct 13th 2008

    
   jondoe -
   A deal breaker because it would complicate your page more? The reason it
   works that way is so that it can do the client/platform detection and
   serve up the right player/encoding. You could easily try it out (grab it from
   the Share tab) and let me know how it goes.
4. • CommentAuthorjondoe
   • CommentTimeOct 13th 2008

    
   here's the way we do it currently... let me know if you think it's
   compatible. (i am not a js expert.)
   
switch (site_id)
{
case 1:
/* youtube */
var width = 425;
var height = 355;
var media_id = media.site_data.media_id;
var src =
"http://www.youtube.com/v/"+media_id+"&autoplay=1";
break;
case 16:
/* sesamevault */
var width = 480;
var height = 387;
var src =

"http://www.sesamevault.com/obt_preview_player/obt_embeddable_dynamic_encoding_player.swf";
var flashVars =

"id="+media_id+"&server_target=http://www.sesamevault.com&api=1.0&encoding_to_play=ipod5gen&allowFullScreen=false&include_fullscreen_controls=false&include_embed_code_button=false";
break;
default:
return;
}
var obj = $('<object width="'+width+'" height="'+height+'"/>')
.append('<param value="'+src+'" name="movie"/>')
.append('<param value="transparent" name="wmode"/>');

var embed = $('<embed width="'+width+'"
height="'+height+'" wmode="transparent"
type="application/x-shockwave-flash" src="'+src+'"/>').appendTo(obj);

if (flashVars)
{
obj.append('<param name="FlashVars" value="'+flashVars+'"
/>')
embed.attr('FlashVars',flashVars);
}

return obj;

5. • CommentAuthorMichael Rabinovich
   • CommentTimeOct 13th 2008

    
   The UP will should work in your case, and in addition it should allow you to actually simplify the code. Instead of building an embed and object tag and making FlashVars for each, all you need to do is assemble a single script url query string. Take a look at the UP code generated by the SesameVault GUI (in the Share tab) and you will see what I mean.
   Shoot me back an email if you would like me to clarify this more or help in some other way.
6. • CommentAuthorjondoe
   • CommentTimeOct 13th 2008

    
   your advice of swapping out the embed for a script
   tag doesn't work. could be what we're doing with it once it comes
   back, but i am not a js/jquery expert.
7. • CommentAuthorMichael Rabinovich
   • CommentTimeOct 13th 2008

    
   Was there an error of some sort?
8. • CommentAuthorMichael Rabinovich
   • CommentTimeOct 13th 2008

    
   Also, could you show me what the resulting assembled code looked like?
9. • CommentAuthorMichael Rabinovich
   • CommentTimeNov 18th 2008

    
   Universal Player API documentation is available:
   http://www.sesamevault.com/documentation/api_calls/universal_player.html
10. • CommentAuthorMichael Rabinovich
    • CommentTimeSep 28th 2009

     
    You might be interested in this step-by-step tutorial I just posed. It shows how to create a cross-platform, mobile-emabled embed. This embed serves your own custom Flash player if the user has Flash. Check it out on the forums here.