Customer Sign In

upLynk

Web browser players

Overview

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.

upLynk.jshttp://storage.uplynk.com/js/uplynk.js
upLynk Standard Flash Playerhttp://storage.uplynk.com/client/latest_upLynkPlayer.swf
upLynk OSMF Pluginhttp://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 - Each asset or channel in the CMS displays a Test Player web page link. This URL can be used for testing playback and is a standalone web page hosted by upLynk. The test player URL overrides any DRM restrictions, meaning that anyone with theURL can play the content. By clicking the 'Expire' button below the test player URL in the CMS, the existing URL is destroyed and is no longer useable, and a new URL is created in its place. In this way you can effectively disable a test player URL if it is accidentally distributed outside your organization.
  • Embed player - Each asset or channel in the CMS also has an Embed HTML snippet in the Embed tab. This small chunk of HTML code can be copied and pasted into any web page, making it trivial to embed upLynk video. Use the 'Allowed Domains' field to specify which websites are allowed to embed your video to prevent your content from being embedded into 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 all the customization parameters in authorization tokens, 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 'doubleclick2':

http://content.uplynk.com/player/XgZa3XccnVOOvL2LLffNeadgYk0tZs7bjKrU1N8wRDhUm2sc.html?rays=cd&delay=3600&ad=doubleclick2

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:

http://content.uplynk.com/player/XgZa3XccnVOOvL2LLffNeadgYk0tZs7bjKrU1N8wRDhUm2sc.html?rays=cd&delay=3600&ad=doubleclick2&clearsession=1

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.

Short-cut method to create player with playback URL
1
$('#uplynkPlayer').player('play', url);
Create player with options
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
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
1
2
3
4
$('#uplynkPlayer').player(function(ref) {
        // player is ready.
        $(this).player('play', url);
    });
Listen for player events
1
2
3
$('#uplynkPlayer').bind(uplynk.events.EVENT_NAME, function(e, arg) {
    console.log(e, arg);
});
Methods
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 occured 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 statearg0 = new state: play|pause|loading|loaded|seeking|buffering
    • uplynk.events.PLAYER_VOLUME_CHANGED
      player's volume has changedarg0 = 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 with no javascript using object tag
1
2
3
4
5
6
<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)
1
2
3
4
5
6
7
8
9
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:

1
2
3
4
5
var flashvars = {useStageVideo:true};
var params = {};
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
...
Configure Player and Start Playback
1
2
3
var player = document.getElementById("player");
player.setVideoSmoothing(false);
player.playURL("[Content URL]");
Respond to Player Events
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
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...
  }
}
Methods
playURL(url:String):voidbegins the loading and playback of the specified ".m3u8" targeted URL
loadURL(url:String):voidbegins the loading of the specified ".m3u8" targeted URL
stop():voidstops playback. must call playURL or loadURL in order to load new content
pause():voidpauses playback
resume():voidresumes playback
version():Stringreturns the player version
Accessors
isPaused():booleanindicates if the player is currently paused
getDuration():floatget duration of current stream in seconds
getPosition():floatget playback position of current stream in seconds
setVideoSmoothing(boolean):voidenables or disables video smoothing
getVolume():numbergets the players current volume ( 0.0 - 1.0 )
setVolume(number):voidsets the players current volume ( 0.0 - 1.0 )
getMute():booleanindicates if the player is muted
setMute(boolean):voidsets 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
1
2
3
4
5
<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:

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

to this:

1
2
3
4
5
6
7
var parameters = {
   src: "http://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.

NOTE: 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)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
$("#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>');