Player SDK 1.0 : Getting Started

Table of Contents [Hide/Show]


      Embedding the Player
      Customizing playback
      Methods
      Event handling
       speakerResource
       topicResource


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/cwc/iframe/player/client.js"></script>
< script type="text/javascript">

    var cwcPlayer = cwc.iframe.player.client.create({
        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. This is the WebcastCode, or WebcastGuid that you have retrieved through other components of the Company Webcast API.
offsets
An array of integers. Expose only parts of the media stream. This is essentially virtual fragment generation. In milliseconds: [start, end, start, end].
start
An integer. 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. Allows for Single Signon scenarios.
display
A Bitwise OR. 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

< script type="text/javascript">

    var cwcPlayer = cwc.iframe.player.client.create({
        id: 'customer/code',
        start: 5000,
        offsets: [20000, 40000, 50000, 80000],
        display: 1 | 2
    });

</script>




Edit

Methods

An instance of the embedded player has 2 methods.

Available methods:

on
See Event handling
seek
Accepts an integer as its input parameter. In milliseconds. Media playback jumps to the given position.


< script type="text/javascript">

    cwcPlayer.seek(5000);

</script>




Edit

Event handling

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

Available Events:

cwc.sdk.player.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.


cwc.sdk.player.resource.properties.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.
properties.isActive
A boolean. If true, the resource is currently active.
view
A string. Either "current" or "live". The embedded player has DVR features, meaning users are able to pause and rewind a live stream. This is why the cwc.sdk.player.resource.properties.change event fires both when a resource changes on the current position in the timeline, and when a resource changes in the "live playhead". For most cases you would only be interested in events of the "current" view.




< script type="text/javascript">

    cwcPlayer.on('cwc.sdk.player.resource.create', function (resourceCreateEvent) {

    });

    cwcPlayer.on('cwc.sdk.player.resource.properties.change', function (resourceChangeEvent) {

    });

</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.
namespace
A string. Contains "cwc.legacy.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.




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.
namespace
A string. Contains "cwc.legacy.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.