Integrating an HTML5 Video Tag with IQ Using the JS SDK

The Ooyala HTML5 video tag adapter uses the Ooyala IQ JavaScript SDK to communicate HTML5 <video/> tag events 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 the HTML5 video tag player with Ooyala IQ.

Prior to using the HTML5 video tag 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. 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. Reference analytics.js at https://analytics.ooyala.com/static/analytics.js in the page where your player is hosted. This needs to be done for any page that has a player. You must load this script before any other script that modifies the <video/> element.
    Warning: Do not host analytics.js on your own. If you do so, you will not receive bug fixes and updates. Please use the Ooyala-hosted version at https://analytics.ooyala.com/static/analytics.js.
  2. Include the <video/> HTML5 tag on your page.
    1. Get the video element in a variable.
    2. Set the data-embedId attribute to the video element.
    3. Call Ooyala.Analytics.HTML5Reporter.
See the example below:
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://analytics.ooyala.com/static/analytics.js"></script>
</head>

<body>
    <video id="video" height="600px" controls>
     <source src="http://csg-eng.ooyala.com/custom-iq-reporters/video.mp4" type="video/mp4"></source>
      <p>Click image to play a video demo of dynamic app search</p>
   </video>
    <script type="text/javascript">
        var videoContainer = document.getElementById("video");
        videoContainer.setAttribute("data-embedId", embedcode);
        Ooyala.Analytics.HTML5Reporter(yourOoyalaPcode, videoContainer);
    </script>
</body>

</html>      

Was this article helpful?