Integrating Xbox One Video App with IQ Using the JS SDK

The Ooyala Xbox One adapter uses the Ooyala IQ JavaScript SDK to communicate video events from the Xbox One video app to Ooyala IQ. You can implement this adapter yourself, or Ooyala Professional Services can help you implement the adapter for a fee. Complete the following steps to integrate your Xbox One HTML5 video app with Ooyala IQ.

If you use the Ooyala Xbox One adapter, Xbox will appear as an OS in the Device panel of the Ooyala IQ Business Intelligence interface.

Prior to using the Xbox One adapter, you need to make sure that your Ooyala assets are playable on third-party players.
  1. Check that your account has the correct encoding profile to allow encodings that the HTML5 video tag supports on Xbox One. You can ask your account manager for assistance checking your processing profile.
  2. If you had to enable new files to be encoded in your encoding profile, you will need to upload a new video file or re-encode the video file in order to get the newly generated file. Content replacement (replacing an asset) will not work for this step. You must upload a new file or open a support ticket with Ooyala Technical Support to reprocess the video without manually uploading it again to keep the same embed code.
  1. Download analytics.js at https://analytics.ooyala.com/static/v3/analytics.js and xbox_adapter.js at https://github.com/ooyala/iq-sdk-xbox-one-sample, include and bundle the JavaScript libraries in your Xbox One video application and reference them on the page where your player is hosted. This needs to be done for any page that has a player. You must load these scripts before any other script that modifies the <video/> element.
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Xbox One and IQ example</title>
        <link href="css/default.css" rel="stylesheet" />
        <script src="lib/iq/analytics.js"></script>
        <script src="lib/iq/xbox_adapter.js"></script>
    </head>
    </html>
  2. Include the <video/> HTML5 tag on your page.
    <body>
        <video id="player"></video>
    </body>
  3. Create a script on the page to register the video element and video selected for playback with the Xbox One adapter.
    1. Create a variable for the video element.
      var player = document.getElementById('player');
    2. Set the video selected for playback as the data-oo-embedId attribute on the video element. The value of this attribute is either: the embed code you get from Backlot. The value of this attribute is either:
      • the embed code of the asset in Backlot,
      • or the id of the asset in the third-party CMS, in which case you must set the contentType option to EXTERNAL_CONTENT when creating the reporter.
      player.setAttribute('data-oo-embedId', "k4cWdsdzoTxuCp6lyBN7TSTsI6OmdII9");
    3. Create the Xbox One reporter by creating an instance of XboxOneReporter, passing in your Backlot provider code (pcode), the video element and optionally the options for the reporter. These options are:
      • playerName: the name of the player, default value is xbox.
      • playerId: the id of the player, default value is xbox.
      • playerVersion: the version of the player, default value is xbox-10.
      • contentType: the content type (Ooyala.Analytics.MediaContentType) which indicates where the video asset is hosted, the default value is Ooyala.Analytics.MediaContentType.OOYALA_CONTENT. The other possible value for this option is: Ooyala.Analytics.MediaContentType.EXTERNAL_CONTENT, which should be set when the assets are hosted in a third-party CMS.
        Note: The Ooyala IQ JavaScript SDK does not support specifying multiple content types within the same player instance in a page. However, we do support specifying multiple content types for different players on the same page. For example, we do not support analytics for the use case where you have one player on a page that plays Ooyala video assets and external assets. We do support analytics for the use case where you have two players on the same page where one plays Ooyala video assets and the other plays external (non-Ooyala video assets).
      var myXboxOneReporter = new Ooyala.Analytics.XboxOneReporter("pcode", player);

      or

      var myXboxOneReporter = new Ooyala.Analytics.XboxOneReporter("pcode", player, 
      {contentType: Ooyala.Analytics.MediaContentType.EXTERNAL_CONTENT});
  4. Optionally, you can report custom events as follows:
    myXboxOneReporter.reportCustomEvent("eventName" { metadata1: value, ...});
See the example below:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Xbox One and IQ example</title>
    <link href="css/default.css" rel="stylesheet" />
    <script src="lib/iq/analytics.js"></script>
    <script src="lib/iq/xbox_adapter.js"></script>
</head>

<body>
    <video id="player"></video>
    <script type="text/javascript">
        var player = document.getElementById('player');
        player.setAttribute('data-oo-embedId', "k4cWdsdzoTxuCp6lyBN7TSTsI6OmdII9");
        var myXboxOneReporter = new Ooyala.Analytics.XboxOneReporter("pcode", player);
    </script>
</body>

</html>

Was this article helpful?