The Universal Access Redirector unifies both web and mobile Access URL syntaxes into a single URL. Customers can use the UAR URLs to distribute video via messaging such as SMS, or email or via social utilities such as Twitter, where users may access the URL on a desktop or mobile device.
UAR URLs take into account the fact that on mobile devices, a link to video will launch the native player in the device in a modal fashion, whereas in a desktop context, a video is played via an HTML5 or Flash player embedded into a web page.
The syntax of the UAR is designed to be simple, it contains two parameters, a Output Feed ID and the Media Item ID or the video to which it references:
http://agw.cds1.yospace.com/uar/Output Feed ID/Media Item ID
When a user requests a UAR URL, yospaceCDS determines whether the user is using a desktop browser or a device. If the user is using a device, they are redirected to a Mobile Access URL, otherwise they are redirected to a Web Access URL.
When you set-up an Advanced MRSS Output Feed, it is possible to define which of the mobile and web renditions within the output feed will be used for this redirection. In the case of mobile URLs, it is quite simple, the rendition you choose in the Output Feed set-up is the URL that will be redirected to.
It's a little bit more complicated in the desktop redirection use case. Within the Output Feed, an arbitrary URL is defined which yospaceCDS will redirect to. yospaceCDS will pass parameters into this page that JavaScript within the page will use to load the video into the player.
This mechanism is agnostic to the player technology that you use - it simply provides a mechanism for a page you create to be loaded.
In the Output Feed configuration, the Universal Access section allows you to define a URL to which yospaceCDS will redirect the user's browser.
yospaceCDS supports a number of tokens that are replaced at the point of redirection. This allows you to add pass the necessary context information that will allow your player to load the video.
The following tokens can be added to the URL defined:
${URL} – a base64 encoded version of the Web Access URL. This will be the URL that you set-up to be the UAR preference in the Advanced Web Options in the corresponding output feed. You must decode the URL to be able to use it; see the example given below.${MID} - the Media Item ID of the requested video. This allows scripts to generate their own Web Access URLs on-the-fly.${FEED} - the Output Feed ID associated with the UAR configuration being used.${SPEC} - the specification string used to the define the web rendition required.Let's assume that the UAR Web Redirector URL is defined as:
http://www.mywebserver.com/pages/uar,html?url=${URL}&mid=${MEDIA}&fid=${FEED}
Therefore, if the end user clicks with their desktop browser a UAR URL like this:
http://agw.cds1.yospace.com/000012345/9876543
The browser will be redirected to:
http://www.mywebserver.com/pages/uar,html?url=aHR0cDovL2...&mid=9876543&fid=000012345
NB. The base64 encoded URL string has been delberately shortened here to make it is easy to read on this page.
The following page with its example JavaScript will load the video into a Flash Player (in this example, JW Player).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Universal Access Redirector Example</title>
<script type="text/javascript" src="base64u.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js">
</script>
<script type="text/javascript" src="swfobject.js"></script>
<script>
var PLAYER = "player.swf";
var PLAYER_SKIN = 'simple.swf';
var pageQuery = window.location.search.toQueryParams();
// get the URL of the video from the parameter 'url'
var url = decode64u(pageQuery['url']);
// get the Media Item ID from the parameter 'mid'; needed for the Thumbnail API
var mid = pageQuery['mid'];
// get the Feed ID from the parameter 'fid'; this is needed for the Thumbnail API
var fid = pageQuery['fid'];
// Uses the yospaceCDS Thumbnail URL Syntax to get the thumbnail image
var thumb = "http://cds1.yospace.com/access/d/u/0/1/thumb/640x360/"
+ mid + "?f=" + fid;
// Instantiate the player
document.observe('dom:loaded', function() {
if ((url == null) || (mid == null)) {
alert("Problem");
}
else {
var player = new SWFObject(PLAYER, "player", "640", "388", "9", "#FFFFFF");
player.addParam("allowfullscreen","true");
player.addParam("allowscriptaccess","always");
player.addParam("wmode","transparent");
player.addVariable("dock", "false");
player.addVariable("file", url);
player.addVariable("type", "video");
player.addVariable("stretching", "uniform");
player.addVariable("image", thumb);
player.addVariable("autostart", "true");
}
});
</script>
</head>
<body>
<div id="container" class="player"><!-- Player gets put here --></div>
</body>
</html>
This example uses the JavaScript framework prototype manipulate the document DOM to instantiate the player and to get the parameters from the URL query string, you can of course, carry out these functions by hand or with a framework of your choosing.
The function decode64u is provided by the script base64u.js, the source of which is presented below:
// This code was written by Tyler Akins and has been placed in the
// public domain. It would be nice if you left this header intact.
// Base64 code from Tyler Akins -- http://rumkin.com
//
// Modified to provide Base64url instead by Adrian Hungate
var base64UrlKeyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZab" +
"cdefghijklmnopqrstuvwxyz0123456789-_ ";
function encode64u(input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output + base64UrlKeyStr.charAt(enc1) +
base64UrlKeyStr.charAt(enc2) + base64UrlKeyStr.charAt(enc3) +
base64UrlKeyStr.charAt(enc4);
}
return output.strip();
}
function decode64u(input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
// remove all characters that are not A-Z, a-z, 0-9, +, /, or =
input = input.replace(/[^A-Za-z0-9\-\_\ ]/g, "");
while (i < input.length) {
enc1 = base64UrlKeyStr.indexOf(input.charAt(i++));
enc2 = base64UrlKeyStr.indexOf(input.charAt(i++));
enc3 = base64UrlKeyStr.indexOf(input.charAt(i++));
enc4 = base64UrlKeyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if ((enc3 != 64) && (enc3!=-1) && (chr2 > 0)) {
output = output + String.fromCharCode(chr2);
}
if ((enc4 != 64) && (enc4!=-1) && (chr3 > 0)) {
output = output + String.fromCharCode(chr3);
}
}
return output;
}