Integrating FlowPlayer with IQ Using the JS SDK

The Ooyala FlowPlayer adapter uses the Ooyala IQ JavaScript SDK to communicate FlowPlayer events to Ooyala IQ. The Ooyala FlowPlayer adapter currently supports FlowPlayer 6. 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 FlowPlayer with Ooyala IQ.

Prior to using the FlowPlayer 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 FlowPlayer 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.
    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. Create a FlowPlayer player.
    1. Import the FlowPlayerAnalytics library.
    2. Embed a player using the instructions at https://flowplayer.org/docs/setup.html#manual and https://flowplayer.org/docs/setup.html#javascript-install.
    3. Pass the video container DOM element as a player.
    4. Get the player container element in a variable.
    5. Install flowplayer into selected container.
    6. Add the embedId at the player config object.
    7. Call Ooyala.Analytics.FlowPlayerReporter with the pCode and the variable that contains the element as a parameters.
    8. (Optional) Specify a media content type with the MediaContentType parameter to show if the mediaid specifies an Ooyala video asset or a non-Ooyala video asset. You can set the media content type as one of the two following values. If you do not specify a media content type, the default value is EXTERNAL_CONTENT (non-Ooyala media assets).
      • OOYALA_CONTENT: Indicates that the media ID is an Ooyala embed code. Set the value of OOYALA_CONTENT to the Ooyala embed code. Use contentType: Ooyala.Analytics.MediaContentType.OOYALA_CONTENT.
      • EXTERNAL_CONTENT: Indicates that the media ID is not an Ooyala embed code (and is customer-defined media ID from a non-Ooyala CMS). Use contentType: Ooyala.Analytics.MediaContentType.EXTERNAL_CONTENT.
      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).
    Warning: You must be using a valid browser (as defined by https://flowplayer.org/docs/setup.html#section_html5-engine ).
See the example below:
<script>
    < div id = "player" > < /div>
        // select the above element as player container
    var container = document.getElementById("player");
    // install flowplayer into selected container
    flowplayer(container, {
        clip: {
            embedId: 'yourEmbedCode',
            sources: [{
                type: "video/mp4",
                src: "yourVideo.mp4"
            }]
        }
    });

    Ooyala.Analytics.FlowPlayerReporter('yourOoyalaPcodeHere', container);
</script>         

Was this article helpful?