PlayerSDK 2.0 Getting Started

Table of Contents [Hide/Show]


      Embedding the Player
      Customizing playback
      Methods
      Event handling
       speakerResource
       topicResource
       event
      Using Chat
      Advanced Sample: Topics Menu
      Advanced Sample: NOSCRIPT support


Edit

Embedding the Player

Embedding the Player involves:
loading a JavaScript library from Company Webcast servers
adding a DIV to your DOM that the Javascript library can fill with the Player
initializing the Player from Javascript.



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Player SDK Sample Application</title>
</head>
<body>
    <div id="playerContainer" style="width:640px;height:360px;"></div>
</body>
</html>

< script type="text/javascript" src="//sdk.companywebcast.com/sdk/player/client.js"></script>
< script type="text/javascript">

    var cwcPlayer = cwc.sdk.player.client.createPlayer({
        id: 'customer/code'
    });

    document.getElementById("playerContainer").appendChild(cwcPlayer.element);

</script>



Edit

Customizing playback

Players can be configured to start playback from a specific position.
Players can be configured to play a fragment, or a series of fragments, from a single Webcast.
Players can be configured to hide specific Player functionality and UI features.


Player initialization accepts the following parameters:

id
A string, required. This is the WebcastCode, or WebcastGuid that you have retrieved through other components of the Company Webcast API.
offsets
An array of ISO Date strings, optional. Expose only parts of the media stream. This is essentially virtual fragment generation. In ISO Date strings: [start, end, start, end].
start
An integer, optional. In milliseconds, the position from where the Player will commence playback. The start property is applied after any configured offsets are applied.
identificationToken
A string, optional. Allows for Single Signon scenarios.
autoplay
A boolean, optional. Automatically start media playback, if possible on the client device.
repeat
A boolean, optional. Automatically restarts media playback from position 0, when the end of the stream is reached.
language
A language code string, optional. Overrides automatic language detection, and forces the selected language. Currently supported languages are: Dutch (nl), English (en), German (de), French (fr), Portuguese (pt) and Spanish (es).
display
A Bitwise OR, optional. Configures which parts of the Player are visible.
Not setting this property will display all buttons.

Options are:
1
display home button
2
display topics button, if available
4
display social button, if available
8
display embed button, if available
16
display interactive features, if available
32
display Ask-a-question feature, if available
64
display controls

< script type="text/javascript">

    var cwcPlayer = cwc.sdk.player.client.createPlayer({
        id: 'customer/code',
        start: 5000,
        offsets: [2016-08-25T19:14:58.285Z, 2016-08-25T20:07:16.705Z],
        display: 1 | 2 | 64 //display home and topics buttons, and controls. hide all other functionality
    });

</script>




Edit

Methods

An instance of the embedded player has 3 methods.

Available methods:

on
See Event handling
createChat
See Using Chat
seek
Media playback jumps to the given position.
Accepts a seek object as its input parameter. The seek object has either the timestamp property, or the walltime property.
Timestamps are milliseconds, expressed as an integer.
Walltimes are ISO Date strings.


< script type="text/javascript">

    //Jump to the 5 second position
    cwcPlayer.seek({ timestamp: 5000 });

    //Jump to whichever position maps to March 1st, 2007 at 13:00 UTC.
    cwcPlayer.seek({ walltime: '2007-03-01T13:00:00Z' });

</script>




Edit

Event handling

Event listeners can be attached to the embedded player, so events can be received for changes in state and metadata.

Available Events:

info:create

Fires when highlevel metadata is available. This happens during initialization.
Returns an infoObject.

properties of infoObject are:

label
A string. The title of the Webcast
description
A string. The description of the Webcast
start
A Date. The start date and time of the Webcast
duration
A string. The duration of the Webcast in hh:mm:ss
downloads
An Array of download objects. A download object has the url property, which points to a download related to this Webcast.


resource:create

Fires when a new resource is added to the model. This happens during initialization, when metadata is loaded into the player, and when new resources are added during a live Webcast.
Returns a resourceCreateEvent.

properties of resourceCreateEvent are:

playerId
A string. The id of the player instance that generated the event.
resource
Either a speakerResource, or a topicResource. The resource that was added to the model.


resource.state:change

Fires when a resource activates or de-activates.
Returns a resourceChangeEvent.

properties of resourceChangeEvent are:

playerId
A string. The id of the player instance that generated the event.
resource
Either a speakerResource, or a topicResource. The resource that was changed.
isActive
A boolean. If true, the resource is currently active.


event:create

Fires when a new Event is added to the Player model.
Returns a eventCreateEvent.

properties of eventCreateEvent are:

playerId
A string. The id of the player instance that generated the event.
event
An event. The event that was added to the model.


chat:ready

Fires when chat has successfully initialized, and is ready to be used.
See Using Chat for more information.




< script type="text/javascript">

    cwcPlayer.on('resource:create', function (resourceCreateEvent) {

    });

    cwcPlayer.on('resource.state:change', function (resourceChangeEvent) {

    });

    cwcPlayer.on('event:create', function (eventCreateEvent) {

    });

</script>




Edit

speakerResource

Contains information about a speaker.

speakerResource has the following properties:

id
A string. The id of the resource. These map onto id's that you've retrieved from other components of the Company Webcast API.
type
A string. Contains "speaker".
order
An integer. If applicable, contains a number indicating the position of the resource in a list of resources of the same type.
category
A string. The category of the speaker. This may contain the political party of the speaker, or a company department, for example.
name
A speakerName object.
speakerName has the following properties:
title
A string. The title of the speaker.
first
A string. The first name of the speaker.
middle
A string. The middle name of the speaker.
last
A string. The last name of the speaker.
full
A string. The full name of the speaker.
role
A string. The role of the speaker.
reference
A string. An arbitrary string applied to this Topic through Management Service.




Edit

topicResource

Contains information about a topic.

topicResource has the following properties:

id
A string. The id of the resource. These map onto id's that you've retrieved from other components of the Company Webcast API.
type
A string. Contains "topic".
order
An integer. If applicable, contains a number indicating the position of the resource in a list of resources of the same type.
label
A string. Contains the title of the topic.
description
A string. Present if available. Contains a description of the topic.
downloads
An Array of download objects. A download object has the url property, which points to a download related to this topic.
reference
A string. An arbitrary string applied to this Topic through Management Service.




Edit

event

An object that contains a timed occurrence. Events describe activation and de-activation of a resource.

event has the following properties:

eventData
A string.
resourceId
A string. The id of the resource this event describes.
intent
A string. Contains one of the following
speakers.speaker:activate
Event describes speakerResource activation.
speakers.speaker:deactivate
Event describes speakerResource deactivation.
topics.topic:activate
Event describes topicResource activation.
topics.topic:deactivate
Event describes topicResource deactivation.
timestamp
An integer. In milliseconds; describes the playback position where this event activates/de-activates.




Edit

Using Chat

Some Webcasts may include Chat functionality. Chat widgets can be embedded using this SDK.
Note that Chat is enabled on a per-Webcast basis, and is only available to customers that have specifically enabled this functionality.
For Webcasts that have Chat enabled, please note that Chats are currently only available when a Webcast is LIVE.
Webcasts either before or after the LIVE phase do not have access to Chat functionality. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Player SDK Sample Application</title>
</head>
<body>
    <div id="playerContainer" style="width:640px;height:360px;"></div>
    <div id="chatContainer" style="display:none;width:640px;height:360px;"></div>
</body>
</html>

< script type="text/javascript" src="//sdk.companywebcast.com/sdk/player/client.js"></script>
< script type="text/javascript">

    var playerContainer = document.getElementById("playerContainer"),
        chatContainer = document.getElementById("chatContainer");

    var cwcPlayer = cwc.sdk.player.client.createPlayer({
        id: 'customer/code'
    });

    cwcPlayer.on('chat:ready', function () {
        chatContainer.style.display = 'block';
    });

    var chatElement = cwcPlayer.createChat();

    playerContainer.appendChild(cwcPlayer.element);
    chatContainer.appendChild(chatElement);

</script>




Edit

Advanced Sample: Topics Menu

This sample shows how a menu of clickable topics can be created from the SDK.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Player SDK Sample Application</title>
</head>
<body>
    <div id="playerContainer" style="width:640px;height:360px;"></div>
    <div id="topicsContainer"></div>
</body>
</html>

< script type="text/javascript" src="//sdk.companywebcast.com/sdk/player/client.js"></script>
< script type="text/javascript">

    var playerContainer = document.getElementById("playerContainer");
    var topicsContainer = document.getElementById("topicsContainer");

    var cwcPlayer = cwc.sdk.player.client.createPlayer({
        id: 'customer/code'
    });

    var topicResources = {};

    cwcPlayer.on('info:create', function (info) {
        console.log(info);
    });

    cwcPlayer.on('resource:create', function (e) {
        if (e.resource.type == "topic") {
            var model = getModel(e.resource.id);
            model.resource = e.resource;
            model.div.appendChild(document.createTextNode(e.resource.label));

            for (var i = 0, length = topicsContainer.children.length; i < length; i++) {
                var div = topicsContainer.children[i];
                if (div.model.resource.order > e.resource.order) {
                    topicsContainer.insertBefore(model.div, div);
                    return;
                }
            }

            topicsContainer.appendChild(model.div);
        }
    });

    cwcPlayer.on('resource.state:change', function (e) {
        if (e.resource.type == "topic") {
            getModel(e.resource.id).div.style.backgroundColor = e.isActive ? 'red' : 'white';
        }
    });

    cwcPlayer.on('event:create', function (e) {
        if (e.event.target && e.event.intent == "topics.topic:activate") {
            var model = getModel(e.event.resourceId);
            var option = document.createElement('OPTION');

            option.text = msToTime(e.event.timestamp);
            option.value = e.event.timestamp;

            model.select.options.add(option, 1);
            model.select.disabled = false;
        }
    });

    playerContainer.appendChild(cwcPlayer.element);

    function msToTime(duration) {
        var milliseconds = parseInt((duration % 1000) / 100)
            , seconds = parseInt((duration / 1000) % 60)
            , minutes = parseInt((duration / (1000 * 60)) % 60)
            , hours = parseInt((duration / (1000 * 60 * 60)) % 24);

        hours = (hours < 10) ? "0" + hours : hours;
        minutes = (minutes < 10) ? "0" + minutes : minutes;
        seconds = (seconds < 10) ? "0" + seconds : seconds;

        return hours + ":" + minutes + ":" + seconds;
    }

    function getModel(id) {
        var model = topicResources[id];
        if (!model) {
            var div = document.createElement("DIV");
            var select = createSelect(id);

            div.id = id;
            div.appendChild(select);

            model = {
                div: div,
                select: select,
                isActive: false
            }

            div.model = model;
            topicResources[id] = model;
        }

        return model;
    }

    function createSelect(id) {
        var select = document.createElement("SELECT");
        var option = document.createElement("OPTION");

        select.topicResourceUri = id;
        select.disabled = true;

        option.text = "Play";
        select.options.add(option, 1);

        select.addEventListener('change', function () {
            cwcPlayer.seek({ timestamp: parseInt(select.value) });
            select.selectedIndex = 0;
        });

        return select;
    }

</script>




Edit

Advanced Sample: NOSCRIPT support

This sample shows how NOSCRIPT is supported in PlayerSDK.
In this sample the Player is actually rendered as an IFRAME, and options such as id, start and offsets are now parameters of the query string.
For clients without Javascript support, this will result in media playback using browser-native media support. Features such as start and offsets may still be supported in this mode.
At the same time, clients that do support Javascript will get the full Player experience.

Note that media playback for clients without Javascript is currently only supported for On Demand Webcasts. 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <iframe id="iframe"
        src="https://sdk.companywebcast.com/sdk/player/?id=Customer_Code&offsets=2016-08-25T19:14:58.285Z,2016-08-25T20:07:16.705Z"
        width="1280"
        height="720"
        frameborder="0"
        allowfullscreen
        mozallowfullscreen
        webkitallowfullscreen>
    </iframe>

</body>
</html>
< script type="text/javascript" src="//sdk.companywebcast.com/sdk/player/client.js"></script>
< script type="text/javascript">
    var cwcPlayer = cwc.sdk.player.client.createPlayer({
        id: 'Customer/Code',
        element: document.getElementById('iframe')
    });
</script>