On-demand Player

On-demand Player

Managing VIDEO-ON-DEMAND PLAYER


On demand video player is used to play videos which have been uploaded into Icareus Cloud using 'Assets' menu item on the left.


VIDEO PLAYER URL

Each Account on Icareus Suite has its own URL for on-demand player. It can be constructed as follows:

https://suite.icareus.com/web/org_name/player/vod?assetId=SOME_NUMBER

org_name:  Name of your organisation. Name of organisation is shown in url in address bar as the word followed by 'group' string in admin site.

assetId: Id of the uploaded video file. Can be obtained by using 'Assets' menu item on the left.

STARTING PLAYBACK FROM A SPECIFIED TIMESTAMP

It is possible to start the video playback from a specified position by adding a timestamp hash parameter to the player URL. This is done by adding the following to the end of the player URL: '#T<SECONDS>'.
Example of adding a timestamp hash parameter to a player URL:
The above URL would start video playback 2 minutes (120 seconds) into the video.


SETTINGS

The On-demand video player supports the following Settings/configuration that can be passed to the player using URL query parameters.

Table: Supported Query Parameters

Name
Value
Requirement
Info
assetId
number
Mandatory
ID of the uploaded video file
gdoupItemIds
common separated numbers
Optional
Separated by commas(to be used if slider is active to show slides from different groups) 


ON-DEMAND JAVASCRIPT LIBRARY

GENERAL

This library allows a page with video player to register current device with unique ID, fetch video URLs for the selected asset to play on the player and send video usage statistics to the server.

The library is available at the Icareus Suite server under the path /lib/js/v2/players/vod.js. Note, that VOD library uses JQuery library and if it is not available on the page, it is automatically embedded from the official JQuery site.

At the beginning the device where the page is opened is automatically registered at the Icareus Suite server with the unique ID. It is stored as the browser cookie and will persist for one year. Thus all requests from the same device will hold the same device ID used for video usage analyses.

If callback for the player setup function is provided, for the given asset ID the VOD library gets the source video URLs from the Icareus Suite server, stores them and calls the player setup function.

Also VOD library updates the player, so that it would report video usage statistics to the server.

CONFIGURATION

Before loading, VOD library must be configured using the JSON object with the name '_icareus'. It holds the required parameters and is used to keep data received from the server.

Parameters:

Name
Value
Example
Requirement
Info
companyId
number
10154
Mandatory
The company ID where organization is - given 
groupId
number
241825
Mandatory
The group ID where organization is - given
organizationId
number
241824
Mandatory
The organization ID where video assets are - given
playerId
string
'onDemandPlayer'
Mandatory
The ID of the player on the page 
playerSetup
string
'startOnDemandPlayer'
Optional
If given, this function will be called when video URLs for the given asset are received from the server. They will become available as 'sources' parameter of the '_icareus' object. That can be used, for example, to setup and start video player. 
If not provided, it is assumed that video player knows how to fetch video URLs for the given asset. 
host
string
'http://192.168.1.146/'
Optional
If given, this host will be used as the Icareus Suite server. 
If not provided, it is assumed that the page is located on the Icareus Suite server. 
itemId
number
248920
Optional
If given, it holds the asset ID to play on the video player. 
If not provided, it is assumed that asset ID is given as the 'assetId' or 'itemId' parameter for the page URL. 

Example:

var _icareus = {};
_icareus['companyId']=10154;
_icareus['groupId']=241825;
_icareus['organizationId']=241824;
_icareus['playerId']='onDemandPlayer';
_icareus['playerSetup']='startOnDemandPlayer';
_icareus['host']='http://192.168.1.146';
_icareus['itemId']=248920;
// optional
_icareus['playerAutostart']=true; //If want to autostart player
_icareus['userId']='10156'; //To pass userId for access validation of content
_icareus['token']=0348de1dc0cb8fd8167db7e97707301d5a2d03886c; //To use version 03 of API (userId should be present with this)
_icareus['posterUrl']='http://suite.icareus.com/image_gallery?img_id=13456'; //To set a poster URL

EMBEDDING

To embed the VOD library just place the provided code on the page and define the correct location of the library.

(function() {
    var vod= document.createElement('script');
    vod.type = 'text/javascript';
    vod.async = true;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(vod, s);
})();

JWPLAYER EXAMPLE

This example shows how VOD library can be used together with JWPlayer. It is assumed, that asset ID is provided as a parameter to the page URL and the page is not located on the Icareus Suite server.

<html>
    <head>
    <script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
    <script type="text/javascript">
        var _icareus = {};
        _icareus['companyId']=10154;
        _icareus['groupId']=241825;
        _icareus['organizationId']=241824;
        _icareus['playerId']='onDemandPlayer';
        _icareus['playerSetup']='startOnDemandPlayer';
        _icareus['host']='http://192.168.1.146';
        (function() {
            var vod= document.createElement('script');
            vod.type = 'text/javascript';
            vod.async = true;
            vod.src = _icareus['host']+'/lib/js/v1/players/vod.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(vod, s);
        })();
    </script>
    <script type="text/javascript">
        function startOnDemandPlayer() {
        var player = jwplayer("onDemandPlayer").setup({
            flashplayer: "/jwplayer/jwplayer.flash.swf",
            html5player: "/jwplayer/jwplayer.html5.js",
            sources: _icareus["sources"],
            primary: "html5",
            width: 640,
            height: 360,
            mute: "false",
            stretching: "fill"
        });
        if (typeof player.on !== "undefined") {
            player.on("ready",function() {
                this.play();
            });
        } else
        if (typeof player.onReady !== "undefined") {
            player.onReady(function() {
                this.play();
            });
        }
        }
    </script>
    </head>
    <body>
    <div id="onDemandPlayer"/>
    </body>
</html>


    • Related Articles

    • Video-On-Demand Analytics

      Introduction In contrast to the analytics of live streams and events, real-time is not as important in the analytics of streaming or on-demand videos. It can be used in OVP, OTT and Event uses cases, but also with HbbTV and Smart TV environments when ...
    • HbbTV Video-On-Demand Player

      Introduction to VOD PLAYER FOR HBBTV 1 2 3 4 var vod = new VOD (serverUrl, organizationId, organizationSecret, containerId); vod.initialize (function () {      vod.playWithAds (assetId, vastUrl, onPlayStateChange, onControlStateChange); }); Name  ...
    • Creating & Managing On-Demand Video Players

      Creating a Player On-demand video players can be created under Publishing -> Players -> by clicking "Add New Player". It will open the player settings page. Most visual changes can be previewed on the preview video player on the right side of the ...
    • On-Demand Video Transcoding and Video Qualities from SD to 4K

      Introduction Icareus Suite can transcode all on-demand content using its integrated transcoding system. Alternatively it is possible for you to pre-transcode all your on-demand files and add them to a Icareus Suite Asset manually. This document ...
    • Event & Webinar Player

      Introduction The theme of the event or webinar page is configured under Players. Webinar players provide versatile, easy way to customize the look & feel of the video event. Options to use Custom Event & Webinar UX There are four options: Event & ...