Web Players

The Uplynk OSMF player/Flash SDK has been deprecated. It is recommended that all customers transition to the Uplynk HTML5 AdaptivePlayer.

This guide is provided to illustrate the various options an integrator has for creating a high quality playback interface using the Uplynk Player or Uplynk's API components.

Links

The below links are to be used by Uplynk integrators to help them get a web player working. Details on how to use these links are referenced below.

Name	Description
upLynk.js	http://storage.uplynk.com/js/uplynk.js
Uplynk Standard Flash Player	http://storage.uplynk.com/client/latest_upLynkPlayer.swf
Uplynk OSMF Plugin	http://storage.uplynk.com/client/latest_upLynkOsmfPlugin.swf

Pre-Built Player Pages

Most of the information in this guide explains how a developer can use Uplynk libraries to create a customized playback experience in a web page. Uplynk does provide, however, two fully developed player pages that can be used in certain scenarios:

• Test player - Uplynk may host a standalone web page through which you may test playback. However, this test player allows anyone with the URL to play content. If a test player URL is accidentally distributed outside your organization, then you should delete the test player to disable that URL and generate a new test player.

  Prevent test players from being automatically generated by marking the Enable option under the Prevent Auto Creating Test Players section of the Test Player Restrictions page.

• Embed player - Embed a player on your web page by copying and pasting a small HTML code snippet from the Playback tab corresponding to the desired asset, live channel, or live event. Use the Allowed Domains option to identify the sites that will be allowed to embed your video. This security measure prevents your content from being embedded within pages you don't control.

With both the test player and embed player, you can add the 'stageVideo=1' parameter to the URL. If a user is watching content via the Adobe Flash Player, this parameter will enable hardware accelerated rendering via Flash's Stage Video. By default Stage Video is currently disabled due to inconsistent behavior on some platform. When used, however, Stage Video results in drastically reduced CPU utilization and smoother video playback. Stage Video may be enabled by default in the future.

The test player URL also supports customization parameters, which makes the test player useful for trying out different auth token features. For example, the following URL loads the test player and restricts playback to the C and D rays, adds an artificial delay of one hour, and tests the ad server configuration named 'gam2':

When testing auth tokens, a playback session is created and reused even if you refresh your web browser. To force a new session to be created each time, add 'clearsession=1' to the URL:

upLynk.js - A Video Embedding jQuery Plugin

The jQuery plugin, uplynk.js can be used to quickly embed a simple reference video player in your web page. It provides some simple browser and platform detection, then provides the Uplynk Flash player or the native video player of the platform, to play back the desired content. Both the Test Player and Embed player pages use uplynk.js.

Use of this plugin requires jQuery to be included in your page.

Shortcut method to create player with playback URL:

$('#uplynkPlayer').player('play', url);

Create player with options:

var swfURL = 'http://storage.uplynk.com/client/latest_upLynkPlayer.swf';
var expressInstall = 'expressInstall.swf';
var params = {
    'bgcolor': '#00ff00'
};
var attrs = {
    custom_attr : "value"
};
$('#uplynkPlayer').player({
    swfURL : swfURL,
    exressInstall : expressInstall,
    params : params,
    attributes : attrs
}, function() {
    $(this).player('play', url);
});

Create player with callback function:

$('#uplynkPlayer').player(function(ref) {
        // player is ready.
        $(this).player('play', url);
    });

Listen for player events:

$('#uplynkPlayer').bind(uplynk.events.EVENT_NAME, function(e, arg) {
    console.log(e, arg);
});

Method	Description
player('load', url)	load the url but do not automatically start playback
player('play', url)	play the url
player('play')	unpause playback
player('pause')	pause playback
player('stop')	stop playback
player('currentTime')	returns the current playback time of the player in seconds
player('currentTime',newTime)	sets the current playback time of the player
player('duration')	returns duration of content in seconds
player('muted')	returns true if player is muted, false if not
player('muted', true|false)	set the muted state of the player
player('volume')	returns the current volume of the player [0.0-1.0].
player('volume', newVolume)	set the volume of the player [0.0-1.0].

Event Callbacks:

• function(ev,[args])

  • uplynk.events.PLAYER_ERROR an error with playback has occurred

    arg0 = error code
  • uplynk.events.PLAYER_MEDIA_ENDED playback has reached the end of the media

  • uplynk.events.PLAYER_STATE_CHANGED playback has entered a new state

    arg0 = new state: play|pause|loading|loaded|seeking|buffering

  • uplynk.events.PLAYER_VOLUME_CHANGED player's volume has changed

    arg0 = new volume value [0.0-1.0]

Flash Integration

Standalone Player without JavaScript

The following code allows you to embed a player on a site such as facebook without using any javascript.

Create player without JavaScript using object tag:

<object width="100%" height="720" type="application/x-shockwave-flash" id="upLynk" data="http://storage.uplynk.com/client/latest_upLynkPlayer.swf">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="wmode" value="direct">
<param name="bgcolor" value="#000000">
<param name="flashvars" value="defaultURL=[CONTENT URL]"></object>

Available Flashvars:

• useStageVideo Override the use of stagevideo true or false
• defaultURL Path to video resource URL Encoded
• defaultVolume Sets the default volume for the player. Value of 0 sets the player to muted. 0.0 - 1.0

Standalone Player with Javascript

You can use the supplied standalone player (upLynkPlayer.swf) to quickly get up and running. The standalone player includes built-in play controls and is configurable via a JavaScript API.

Create player via script (SWFObject):

var flashvars = {};
var params = {};
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
params.wmode = "direct";
var attributes = {};
attributes.id = "player";
swfobject.embedSWF("upLynkPlayer.swf", "flashContainer", "100%", "100%",
		"10.2.0", "expressInstall.swf", flashvars, params, attributes);

Flash 10.2 and later supports hardware accelerated video rendering through a feature known as Stage Video. Stage Video can greatly reduce CPU utilization and therefore provide a smoother playback experience, especially on slower computers. To enable Stage Video, set useStageVideo to true in the flashvars:

var flashvars = {useStageVideo:true};
var params = {};
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
...

Configure player and start playback:

var player = document.getElementById("player");
player.setVideoSmoothing(false);
player.playURL("[Content URL]");

Respond to player events:

function OnPlayerEvent(e, p1, p2)
{
  if (e == 'player_loaded')
  {
	console.log('upLynk player has loaded');
	$('#playerVersion').text('Player Version: ' + $('#player').get(0).version());
  }
  else if (e == 'key_error')
  {
	console.error('PlayerKeyError: ' + p1);
	// show error dialog...
  }
  else if (e == 'fullscreen_changed')
  {
	console.log('Fullscreen changed: ' + p1);
	// perform actions...
  }
}

Method	Description
playURL(url:String):void	begins the loading and playback of the specified ".m3u8" targeted URL
loadURL(url:String):void	begins the loading of the specified ".m3u8" targeted URL
stop():void	stops playback. must call playURL or loadURL in order to load new content
pause():void	pauses playback
resume():void	resumes playback
version():String	returns the player version

 

Accessors	Description
isPaused():boolean	indicates if the player is currently paused
getDuration():float	get duration of current stream in seconds
getPosition():float	get playback position of current stream in seconds
setVideoSmoothing(boolean):void	enables or disables video smoothing
getVolume():number	gets the players current volume ( 0.0 - 1.0 )
setVolume(number):void	sets the players current volume ( 0.0 - 1.0 )
getMute():boolean	indicates if the player is muted
setMute(boolean):void	sets the players muted state

Event callbacks:

• OnPlayerEvent(string,[args]) fired by player events arg0 = eventType:String
  • player_loaded
    played has completed loading
  • key_error
    player encountered a DRM-related error arg1 = string:message
  • fullscreen_changed
    player fullscreen state changed arg1 = boolean:(true=fullscreen)
  • metadata_reached
    player encountered timed metadata arg1 = string:<beamID>_<ray>_<sliceNum>
  • asset_info_available
    player has loaded an asset metadata object for a new assetidarg1 = object

Loading Uplynk OSMF Plugin without Javascript or Actionscript

Using the Strobe Media Player you can make it so that it'll automatically load in the Uplynk OSMF plugin without using any code. This is helpful for embedding the player on sites such as facebook. You will need to download and host your own copy of the StrobeMediaPlayback.swf. The swf is already available pre-compiled in the latest binary downloads available from here.

Strobe embed code:

<object style="visibility: visible;" id="StrobeMediaPlayback" data="StrobeMediaPlayback.swf" name="StrobeMediaPlayback" type="application/x-shockwave-flash" height="480" width="640">
    <param value="true" name="allowFullScreen">
    <param value="direct" name="wmode">
    <param value="src=[CONTENT URL]&amp;plugin_upLynkPlugin=http://storage.uplynk.com/client/latest_upLynkOsmfPlugin.swf" name="flashvars">
</object>

Loading Uplynk OSMF Plugin with Javascript and Strobe Media Player

Alternatively, you can use an unmodified OSMF or Strobe swf and load the Uplynk plugin by just modifying your web page. Using Strobe 1.5.1's example debug.html file for Flash 10.1, you can change this section of the original file:

var parameters = {
   src: "http://mediapm.edgesuite.net/osmf/content/test/manifest-files/dynamic_Streaming.f4m",
   autoPlay: false,
   controlBarAutoHide: false,
   playButtonOverlay: true
};

to this:

var parameters = {
   src: "https://content.uplynk.com/xxxx.m3u8".replace(/&/g, '%26'), // see comment below
   plugin_upLynkPlugin:'http://storage.uplynk.com/client/latest_upLynkOsmfPlugin.swf',
   autoPlay: true,
   controlBarAutoHide: false,
   playButtonOverlay: true
};

to play Uplynk content.

OSMF requires that any ampersands in the URLs be escaped by replacing them with '%26', hence the use of the Javascript string replacement function above.

iOS Browser Integration

Integration for iOS devices can be achieved by simply embedding the native QuickTime Player and setting the appropriate .m3u8 content source.

QuickTime embed via JavaScript (JQuery):

$("#video_container").html('<emb'+'ed
	id="player"
	name="player"
	src="[Content URL]"
	width="100%"
	height="100%"
	scale="ToFit"
	bgcolor="#000000"
	enablejavascript="true"
	type="video/quicktime"
	pluginspage="http://www.apple.com/quicktime/download/"
	></emb'+'ed>');