kuu/iq-sdk.html

## iq-sdk.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>IQ JS SDK Demo</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script src="//player.ooyala.com/static/v4/stable/4.10.6/core.min.js"></script>
  <script src="//player.ooyala.com/static/v4/stable/4.10.6/video-plugin/main_html5.min.js"></script>
  <script src="//player.ooyala.com/static/v4/stable/4.10.6/video-plugin/osmf_flash.min.js"></script>
  <script src="//player.ooyala.com/static/v4/stable/4.10.6/video-plugin/bit_wrapper.min.js"></script>
  <script src="//analytics.ooyala.com/static/v3/analytics.js"></script>
  <script src="//player.ooyala.com/static/v4/stable/4.10.6/skin-plugin/html5-skin.min.js"></script>
  <link rel="stylesheet" href="//player.ooyala.com/static/v4/stable/4.10.6/skin-plugin/html5-skin.min.css">
</head>

<body>
<h2>IQ JS SDK Demo</h2>
<div id="container" style="width:640px;height:360px"></div>
<script src="ua-parser.min.js"></script>
<script>
  var PCODE = 'BtbmUyOlamRiH-S0S-iUeNvf_ghr';
  var PLAYER_ID = '7267438d470c471eb75a165a8b670617';
  var PLAYER_VERSION = '4.10.6';
  var AUTOPLAY = false;
  var playerParam = {
    pcode: PCODE,
    playerBrandingId: PLAYER_ID,
    platform: 'html5',
    debug:true,
    autoplay: AUTOPLAY,
    skin: {
      config: '//player.ooyala.com/static/v4/stable/4.10.6/skin-plugin/skin.json'
    },
    onCreate: onCreate
  };

  OO.ready(function() {
    OO.Player.create('container', 'tzNDI1NzE6gt3qQPR46SU5yi9lDEYLRJ', playerParam);
  });

  function onCreate(player) {
    var playCount = 0;
    var playbackStarted = false;
    var paused = false;
    var current = 0;
    var parser = new UAParser();
    var ua = parser.getResult();
    // var reporter = new MockReporter(PCODE); // For test
    var reporter = new Ooyala.Analytics.Reporter(PCODE);

    player.mb.subscribe(OO.EVENTS.GUID_SET, 'demo', function (_, guid) {
      reporter.setDeviceInfo(guid, {browser: ua.browser.name, browserVersion: ua.browser.version, os: ua.os.name, osVersion: ua.os.version, deviceType: ua.device.type || 'desktop'});
      reporter.setPlayerInfo(PLAYER_ID, 'Ooyala IQ JS SDK Demo', PLAYER_VERSION)
      reporter.reportPlayerLoad();
    });

    player.mb.subscribe(OO.EVENTS.EMBED_CODE_CHANGED, 'demo', function (_, embedCode) {
      reporter.initializeMedia(embedCode, Ooyala.Analytics.MediaContentType.OOYALA_CONTENT);
    });

    player.mb.subscribe(OO.EVENTS.PLAY, 'demo', function () {
      if (playbackStarted) {
        if (paused) {
          paused = false;
          reporter.reportResume();
        }
      } else {
        if (playCount++) {
          reporter.reportReplay();
        } else {
          reporter.reportPlayRequested(AUTOPLAY);
        }
      }
    });

    player.mb.subscribe(OO.EVENTS.PLAYED, 'demo', function () {
      playbackStarted = false;
      paused = false;
      reporter.reportComplete();
    });

    player.mb.subscribe(OO.EVENTS.PAUSE, 'demo', function () {
      paused = true;
      reporter.reportPause();
    });

    player.mb.subscribe(OO.EVENTS.SEEK, 'demo', function (_, target) {
      reporter.reportSeek(current, Math.round(target * 1000));
    });

    player.mb.subscribe(OO.EVENTS.PLAYHEAD_TIME_CHANGED, 'demo', function (_, currentTime, duration) {
      if (!playbackStarted) {
        playbackStarted = true;
        reporter.reportPlaybackStarted();
        reporter.setMediaDuration(Math.round(duration * 1000));
      }
      current = Math.round(currentTime * 1000);
      reporter.reportPlayHeadUpdate(current);
    });
  }

  function MockReporter(pcode) {
    console.log('===> Ctor', pcode);
  }

  MockReporter.prototype = {
    setDeviceInfo: function (deviceId, deviceInfo) {
      console.log('===> setDeviceInfo', deviceId, deviceInfo);
    },
    setPlayerInfo: function (playerId, playerName, playerVersion) {
      console.log('===> setPlayerInfo', playerId, playerName, playerVersion);
    },
    reportPlayerLoad: function () {
      console.log('===> reportPlayerLoad');
    },
    initializeMedia: function (mediaId, contentType) {
      console.log('===> initializeMedia', mediaId, contentType);
    },
    setMediaDuration: function (durationMillis) {
      console.log('===> setMediaDuration', durationMillis);
    },
    reportPlayRequested: function (isAutoPlay) {
      console.log('===> reportPlayRequested', isAutoPlay);
    },
    reportReplay: function () {
      console.log('===> reportReplay');
    },
    reportPlaybackStarted: function () {
      console.log('===> reportPlaybackStarted');
    },
    reportPlayHeadUpdate: function (playHeadPositionMillis) {
      console.log('===> reportPlayHeadUpdate', playHeadPositionMillis);
    },
    reportPause: function () {
      console.log('===> reportPause');
    },
    reportResume: function () {
      console.log('===> reportResume');
    },
    reportSeek: function (startMillis, endMillis) {
      console.log('===> reportSeek', startMillis, endMillis);
    },
    reportComplete: function () {
      console.log('===> reportComplete');
    },
    reportCustomEvent: function (name, metadata) {
      console.log('===> reportCustomEvent', name, metadata);
    }
  };
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>IQ JS SDK Demo</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<script src="//player.ooyala.com/static/v4/stable/4.10.6/core.min.js"></script>
	<script src="//player.ooyala.com/static/v4/stable/4.10.6/video-plugin/main_html5.min.js"></script>
	<script src="//player.ooyala.com/static/v4/stable/4.10.6/video-plugin/osmf_flash.min.js"></script>
	<script src="//player.ooyala.com/static/v4/stable/4.10.6/video-plugin/bit_wrapper.min.js"></script>
	<script src="//analytics.ooyala.com/static/v3/analytics.js"></script>
	<script src="//player.ooyala.com/static/v4/stable/4.10.6/skin-plugin/html5-skin.min.js"></script>
	<link rel="stylesheet" href="//player.ooyala.com/static/v4/stable/4.10.6/skin-plugin/html5-skin.min.css">
	</head>

	<body>
	<h2>IQ JS SDK Demo</h2>
	<div id="container" style="width:640px;height:360px"></div>
	<script src="ua-parser.min.js"></script>
	<script>
	var PCODE = 'BtbmUyOlamRiH-S0S-iUeNvf_ghr';
	var PLAYER_ID = '7267438d470c471eb75a165a8b670617';
	var PLAYER_VERSION = '4.10.6';
	var AUTOPLAY = false;
	var playerParam = {
	pcode: PCODE,
	playerBrandingId: PLAYER_ID,
	platform: 'html5',
	debug:true,
	autoplay: AUTOPLAY,
	skin: {
	config: '//player.ooyala.com/static/v4/stable/4.10.6/skin-plugin/skin.json'
	},
	onCreate: onCreate
	};

	OO.ready(function() {
	OO.Player.create('container', 'tzNDI1NzE6gt3qQPR46SU5yi9lDEYLRJ', playerParam);
	});

	function onCreate(player) {
	var playCount = 0;
	var playbackStarted = false;
	var paused = false;
	var current = 0;
	var parser = new UAParser();
	var ua = parser.getResult();
	// var reporter = new MockReporter(PCODE); // For test
	var reporter = new Ooyala.Analytics.Reporter(PCODE);

	player.mb.subscribe(OO.EVENTS.GUID_SET, 'demo', function (_, guid) {
	reporter.setDeviceInfo(guid, {browser: ua.browser.name, browserVersion: ua.browser.version, os: ua.os.name, osVersion: ua.os.version, deviceType: ua.device.type \|\| 'desktop'});
	reporter.setPlayerInfo(PLAYER_ID, 'Ooyala IQ JS SDK Demo', PLAYER_VERSION)
	reporter.reportPlayerLoad();
	});

	player.mb.subscribe(OO.EVENTS.EMBED_CODE_CHANGED, 'demo', function (_, embedCode) {
	reporter.initializeMedia(embedCode, Ooyala.Analytics.MediaContentType.OOYALA_CONTENT);
	});

	player.mb.subscribe(OO.EVENTS.PLAY, 'demo', function () {
	if (playbackStarted) {
	if (paused) {
	paused = false;
	reporter.reportResume();
	}
	} else {
	if (playCount++) {
	reporter.reportReplay();
	} else {
	reporter.reportPlayRequested(AUTOPLAY);
	}
	}
	});

	player.mb.subscribe(OO.EVENTS.PLAYED, 'demo', function () {
	playbackStarted = false;
	paused = false;
	reporter.reportComplete();
	});

	player.mb.subscribe(OO.EVENTS.PAUSE, 'demo', function () {
	paused = true;
	reporter.reportPause();
	});

	player.mb.subscribe(OO.EVENTS.SEEK, 'demo', function (_, target) {
	reporter.reportSeek(current, Math.round(target * 1000));
	});

	player.mb.subscribe(OO.EVENTS.PLAYHEAD_TIME_CHANGED, 'demo', function (_, currentTime, duration) {
	if (!playbackStarted) {
	playbackStarted = true;
	reporter.reportPlaybackStarted();
	reporter.setMediaDuration(Math.round(duration * 1000));
	}
	current = Math.round(currentTime * 1000);
	reporter.reportPlayHeadUpdate(current);
	});
	}

	function MockReporter(pcode) {
	console.log('===> Ctor', pcode);
	}

	MockReporter.prototype = {
	setDeviceInfo: function (deviceId, deviceInfo) {
	console.log('===> setDeviceInfo', deviceId, deviceInfo);
	},
	setPlayerInfo: function (playerId, playerName, playerVersion) {
	console.log('===> setPlayerInfo', playerId, playerName, playerVersion);
	},
	reportPlayerLoad: function () {
	console.log('===> reportPlayerLoad');
	},
	initializeMedia: function (mediaId, contentType) {
	console.log('===> initializeMedia', mediaId, contentType);
	},
	setMediaDuration: function (durationMillis) {
	console.log('===> setMediaDuration', durationMillis);
	},
	reportPlayRequested: function (isAutoPlay) {
	console.log('===> reportPlayRequested', isAutoPlay);
	},
	reportReplay: function () {
	console.log('===> reportReplay');
	},
	reportPlaybackStarted: function () {
	console.log('===> reportPlaybackStarted');
	},
	reportPlayHeadUpdate: function (playHeadPositionMillis) {
	console.log('===> reportPlayHeadUpdate', playHeadPositionMillis);
	},
	reportPause: function () {
	console.log('===> reportPause');
	},
	reportResume: function () {
	console.log('===> reportResume');
	},
	reportSeek: function (startMillis, endMillis) {
	console.log('===> reportSeek', startMillis, endMillis);
	},
	reportComplete: function () {
	console.log('===> reportComplete');
	},
	reportCustomEvent: function (name, metadata) {
	console.log('===> reportCustomEvent', name, metadata);
	}
	};
	</script>
	</body>
	</html>