Skip to content

Instantly share code, notes, and snippets.

@kuu

kuu/iq-sdk.html

Created January 19, 2017 09:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kuu/8017dbc5a9fe7f95114a330f6514fd09 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kuu/8017dbc5a9fe7f95114a330f6514fd09 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. kuu created this gist Jan 19, 2017.
    152 changes: 152 additions & 0 deletions iq-sdk.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,152 @@
    <!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>