X

The Digital Experience Platform blog covers the latest in innovative technologies to help you transform your business.

Adding Videos to Experiences

By 2022, online videos will make up more than 82% of all consumer internet traffic (Cisco). The growing importance of video was a big factor of Oracle’s decision to partner with Kaltura to provide built-in video management capabilities within Oracle Content and Experience (OCE). That integration makes it easy to create, edit, and publish video content directly within OCE, and then deliver that video content to any channel. All the management, collaboration, and workflows are done within OCE. But under the covers, the video content is converted on the Kaltura platform, and then delivered from Kaltura. That ensures that you can manage your videos as part of the OCE central asset hub, include them as part of your sites and experiences, and deliver those videos in an optimized way to all your channels.

 

Now, if you’re building your site using Oracle Content and Experience, then we offer out-of-the-box components that you can use to deliver the videos to your sites. However, with more and more people taking advantage of OCE as a headless content management system, the site you’re building may be built using a tool/platform outside OCE. The good news is that you can still embed the video from Kaltura within any page and still take advantage of the Kaltura features in a way that is more customized for your audience.

 

At a high level, there are many ways you can embed the video from Kaltura: you can use the browser’s default HTML5 video support, use another custom video player, or you can use the Kaltura JavaScript player. For this example, I’m going to show you how to embed the Kaltura player onto your page and pull/load the published video content from OCE. The steps are pretty simple:

 

1.     Obtain the configuration parameters for the video (the partner ID, player ID (or configuration ID), and entry ID for the video) via the OCE Management API.

2.     Add the JavaScript related to the Kaltura player to your page.

3.     Pass the configuration parameters to the Kaltura Player on your page.

Obtain the Configuration Parameters

 

Before loading the player JavaScript library, you need to know the partner ID, the player ID (or UI configuration ID), and the entry ID of the item you want to include. If you have the ID for the video you want to embed, you can use the REST API for Content Management to extract all this information. If you don’t, you can use the OCE Management API or the OCE Delivery API (for published content). Alternatively, you can get that information from the Web UI directly. For example, by looking at the API properties on the asset in the Web UI.

 

 

Then use the REST API for Content Management to get the video:

 

 

GET http://{host}/content/management/api/v1.1/items/{item_ID}

 

This will return data in this format (note that not all data values are shown):

 

{

    "id": "CONT4879B63407F3431487E694FF1E1616D7",

    "type": "DigitalAsset",

    "name": "Mobile.mp4",

    "description": "",

    "fields": {

        "metadata": {

            "width": "1920",

            "height": "1080"

        },

        "advancedVideoInfo": {

            "provider": "kaltura",

            "properties": {

                "duration": 58,

                "videoStripProperties": "n15,h168,w300",

                "extension": "mp4",

                "searchText": “Mobile.mp4 ",

                "name": "Mobile.mp4",

                "status": "READY",

                "entryId": "1_9ijq4y5e",

                "endpoint": "https://www.kaltura.com",

                "partner": {

                    "id": "2735841"

                },

                "player": {

                    "id": "46290582"

                }

            }

        },

        "renditions": [ . . . ],

        "mimeType": "video/mp4",

        "fileGroup": "AdvancedVideos",

        "version": "1",

        "fileType": "mp4"

    },

}

Notice the entryID, partnerID, and playerID that were returned (shown in bold above). You will then use that to configure the player later.

 

Add the Embed Code

 

Add the embed code for the Kaltura player, within the entryID, partnerID, and playerID specific to the Video Plus asset you want to embed:

 

 

  <div id="my-player" style="width: 640px;height: 360px"></div>

 

  <script type="text/javascript" src="http://cdnapisec.kaltura.com/p/{partnerID}/embedPlaykitJs/uiconf_id/{playerID}">

  </script>

 

  <script type="text/javascript">

  try {

    var config = {

        targetId: "my-player",

        provider: {

           partnerId: {partnerID},

           uiConfId: {playerID}

        }

    };

    var kalturaPlayer = KalturaPlayer.setup(config);

        kalturaPlayer.loadMedia({entryId: '{entryID}'});

  } catch (e) {

    console.error(e.message);

  }

  </script>

 

And that’s it. The playerID is the player configuration for the Kaltura player, as defined for playback within Oracle Content and Experience. However, you can play around with the settings for the Kaltura player and do something different than the OCE default.

 

In a subsequent article, I’ll go into details on how you can do this for a React site. But the general steps and embedding information is the same.

 

 

 

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.