<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>YouTube & Google Analytics Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="lib/ParsedQueryString.js"></script>
<style type="text/css">
<!--
.playing
{
font-weight:bold;
}
#src
{
width:530px;
}
div
{
margin:5px;
}
-->
</style>
<script type="text/javascript">
var gTrackPluginConfig =
'<value key="reTrackConfig" type="class" class="com.realeyes.osmf.plugins.tracking.google.config.RETrackConfig">\
<account>UA-7184501-2</account>\
<url>http://osmf.realeyes.com</url>\
<event name="percentWatched" category="video" action="percentWatched">\
<marker percent="0" label="start" />\
<marker percent="25" label="view" />\
<marker percent="50" label="view" />\
<marker percent="75" label="view" />\
</event>\
<event name="complete" category="video" action="complete" label="trackingTesting" value="1" />\
<event name="pageView" />\
<event name="timeWatched" category="video" action="timeWatched">\
<marker time="5" label="start" />\
<marker time="10" label="start" />\
<marker time="20" label="start" />\
</event>\
<debug>true</debug>\
<updateInterval>250</updateInterval>\
</value>';
function loadStrobeMediaPlayback()
{
var parameters =
{
src:"http://www.youtube.com/watch?v=MCLsktSGOVg&feature=related"
, controlBarAutoHide: false
, playButtonOverlay: false
, loop: true
, autoPlay: false
, verbose: true
, highQualityThreshold: 719
, plugin_youtube: "YouTubePlugin.swf"
//, autoDynamicStreamSwitch: false
//, autoRewind: false
// Google Analytics settings
, plugin_ga: "GTrackPlugin.swf"
, "ga_http://www.realeyes.com/osmf/plugins/tracking/google" : escape (gTrackPluginConfig)
, src_namespace_realeyes:"http://www.realeyes.com/osmf/plugins/tracking/google"
, src_realeyes_pageURL: "YouTube & Google Analytics Sample"
, javascriptCallbackFunction: "onJavaScriptBridgeCreated"
};
var pqs = new ParsedQueryString();
var parameterNames = pqs.params(false);
for (var i=0; i<parameterNames.length; i++)
{
var parameterName = parameterNames[i];
parameters[parameterName]
= pqs.param(parameterName)
|| parameters[parameterName];
}
document.getElementById("src").value = parameters.src;
// Embed the player SWF:
swfobject.embedSWF
( "StrobeMediaPlayback.swf"
, "StrobeMediaPlayback"
, 640, 480
, "10.1.0"
, "expressInstall.swf"
, parameters
, { allowFullScreen: "true", wmode: "direct" }
, { name: "StrobeMediaPlayback" }
);
}
window.onload = loadStrobeMediaPlayback;
var player = null;
function onJavaScriptBridgeCreated(playerId)
{
if (player == null) {
player = document.getElementById(playerId);
// Add event listeners that will update the
player.addEventListener("isDynamicStreamChange", "updateDynamicStreamItems");
player.addEventListener("switchingChange", "updateDynamicStreamItems");
}
}
function updateDynamicStreamItems()
{
var dynamicStreams = player.getStreamItems();
var ds = document.getElementById("ds");
var dsItems = '';
var currentStreamIndex = player.getCurrentDynamicStreamIndex();
for (var idx = 0; idx < dynamicStreams.length; idx ++)
{
var playing = "";
if (currentStreamIndex == idx)
{
playing = "playing";
}
dsItems += '<a href="#" class="' + playing + '" onclick="player.switchDynamicStreamIndex(' + idx + '); return false;">' + dynamicStreams[idx].streamName +' : ' + dynamicStreams[idx].bitrate + '</a><br />\n';
}
ds.innerHTML = dsItems;
}
</script>
</head>
<body>
<h1>YouTube & Google Analytics plugins</h1>
<div id="notes">
<p><strong>Before using the OSMF YouTube plug-in, please review the <a href="http://code.google.com/apis/youtube/terms.html">YouTube API Terms of Service</a>.</strong> (The OSMF YouTube plug-in is built off the YouTube API.)</p>
</div>
<div id="StrobeMediaPlayback">
...
</div>
<div>
<br />
<form>
<input name="src" type="text" id="src"></input>
<input type="submit" value="Load Video"></input>
</form>
<br />
</div>
<h2>Video Quality Control (uses the <a href="https://sourceforge.net/adobe/smp/wiki/JavaScript%20API/">Strobe Media Playback JavaScript API</a>)</h2>
<div id="ds">
The available qualities will be loaded once the playback starts...
</div>
<div>
<h2>References:</h2>
<a href="http://code.google.com/apis/youtube/flash_api_reference.html">YouTube ActionScript 3.0 Player API Reference</a>
<br />
<a href="http://www.realeyes.com/blog/2010/09/27/announcing-google-analytics-plug-in-for-osmf-the-gtrack-plug-in-2">Google Analytics Plug-in For OSMF, The GTrack Plug-in</a>
</div>
</body>
</html>
