PlayerSDK 2.0 Getting Started

{TOC}

====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.{BR}{BR}
{BR}{BR}
@@
<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>
@@
{BR}{BR}{BR}
====Customizing playback====

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

Player initialization accepts the following parameters:{BR}{BR}
::''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 [https://en.wikipedia.org/wiki/ISO_8601|ISO Date] strings, optional. Expose only parts of the media stream. This is essentially virtual fragment generation. In [https://en.wikipedia.org/wiki/ISO_8601|ISO Date] strings: <nowiki>[</nowiki>start, end, start, end<nowiki>]</nowiki>.
::''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>
@@
{BR}{BR}


====Methods====

An instance of the embedded player has 3 methods.
{BR}{BR}
Available methods:{BR}{BR}
::''on''
:::See ''[#Event_handling_3|Event handling]''
::''createChat''
:::See ''[#Using_Chat_7|Using Chat]''
::''seek''
:::Media playback jumps to the given position.{BR}
:::Accepts a ''seek object'' as its input parameter. The seek object has either the ''timestamp'' property, or the ''walltime'' property. {BR}
:::Timestamps are milliseconds, expressed as an integer. {BR}
:::Walltimes are [https://en.wikipedia.org/wiki/ISO_8601|ISO Date] strings. 
{BR}{BR}
@@
< 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>
@@
{BR}{BR}
{BR}{BR}
====Event handling====

Event listeners can be attached to the embedded player, so events can be received for changes in state and metadata.
{BR}{BR}
Available Events:{BR}{BR}
::''info:create''{BR}{BR}
:::Fires when highlevel metadata is available. This happens during initialization.{BR}
:::Returns an ''infoObject''.{BR}{BR}
::::properties of ''infoObject'' are:
{BR}
:::::''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.
{BR}{BR}
::''resource:create''{BR}{BR}
:::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.{BR}
:::Returns a ''resourceCreateEvent''.{BR}{BR}
::::properties of ''resourceCreateEvent'' are:
{BR}
:::::''playerId''
::::::A string. The id of the player instance that generated the event.
:::::''resource''
::::::Either a ''[#ispeakerResourcei_4|speakerResource]'', or a ''[#itopicResourcei_5|topicResource]''. The ''resource'' that was added to the model.
{BR}{BR}
::''resource.state:change''{BR}{BR}
:::Fires when a resource activates or de-activates.{BR}
:::Returns a ''resourceChangeEvent''.{BR}{BR}
::::properties of ''resourceChangeEvent'' are:
{BR}
:::::''playerId''
::::::A string. The id of the player instance that generated the event.
:::::''resource''
::::::Either a ''[#ispeakerResourcei_4|speakerResource]'', or a ''[#itopicResourcei_5|topicResource]''. The ''resource'' that was changed.
:::::''isActive''
::::::A boolean. If true, the resource is currently active.
{BR}{BR}
::''event:create''{BR}{BR}
:::Fires when a new ''Event'' is added to the Player model.{BR}
:::Returns a ''eventCreateEvent''.{BR}{BR}
::::properties of ''eventCreateEvent'' are:
{BR}
:::::''playerId''
::::::A string. The id of the player instance that generated the event.
:::::''event''
::::::An ''[#ieventi_6|event]''. The event that was added to the model.
{BR}{BR}
::''chat:ready''{BR}{BR}
:::Fires when chat has successfully initialized, and is ready to be used.{BR}
:::See [#Using_Chat_7|Using Chat] for more information.
{BR}{BR}
{BR}{BR}
@@
< script type="text/javascript">

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

    });

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

    });

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

    });

</script>
@@
{BR}{BR}
{BR}{BR}
====''speakerResource''====
Contains information about a speaker.{BR}{BR}
''speakerResource'' has the following properties:{BR}{BR}
::''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.
{BR}{BR}
{BR}{BR}
====''topicResource''====
Contains information about a topic.{BR}{BR}
''topicResource'' has the following properties:{BR}{BR}
::''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.
{BR}{BR}
{BR}{BR}
====''event''====
An object that contains a timed occurrence. Events describe activation and de-activation of a ''resource''.{BR}{BR}
''event'' has the following properties:{BR}{BR}
::''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.
{BR}{BR}
{BR}{BR}
====Using Chat====

Some Webcasts may include Chat functionality. Chat widgets can be embedded using this SDK.{BR}
Note that Chat is enabled on a per-Webcast basis, and is only available to customers that have specifically enabled this functionality.{BR}
For Webcasts that have Chat enabled, please note that Chats are currently only available when a Webcast is LIVE.{BR}
Webcasts either before or after the LIVE phase do not have access to Chat functionality.
{BR}{BR}
@@
<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>
@@
{BR}{BR}
{BR}{BR}
====Advanced Sample: Topics Menu====
This sample shows how a menu of clickable topics can be created from the SDK.{BR}{BR}
@@
<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>
@@
{BR}{BR}
{BR}{BR}
====Advanced Sample: NOSCRIPT support====
This sample shows how NOSCRIPT is supported in PlayerSDK.{BR}
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. {BR}
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.{BR}
At the same time, clients that do support Javascript will get the full Player experience.{BR}{BR}
Note that media playback for clients without Javascript is currently only supported for On Demand Webcasts.
{BR}{BR}
@@
<!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>
@@
Companywebcast API Wiki

Navigation

PlayerSDK 2.0 Getting Started
