Page History: Player SDK 1.0 : Getting Started
Compare Page Revisions
Page Revision: 2016/04/06 20:58
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, and initializing the Player from Javascript.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Player SDK Sample Application</title>
</head>
<body>
<div id="playerIFrameWrapper" style="width:640px;height:360px;"></div>
</body>
</html>
< script type="text/javascript" src="//sdk.companywebcast.com/client/1.0/client.min.js"></script>
< script type="text/javascript">
var cwcPlayer = cwc.iframe.player.client.create({
id: 'customer/code'
});
</script>
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.
display
A Bitwise OR. Configures which parts of the Player are visible.
Options are:
1
display media
2
display play/pause button
4
display scrubber
8
display volume button
16
display embed button
32
display share button
64
display home button
128
display fullscreen button
256
display speakers metadata
512
display topics metadata
1024
display annotations
< script type="text/javascript">
var cwcPlayer = cwc.iframe.player.client.create({
id: 'customer/code',
start: 5000,
offsets: [20000, 40000, 50000, 80000],
display: 1 | 2 | 4 | 16
});
</script>
Event handling
Event listeners can be attached to the embedded player, so events can be received for changes in media playback, and 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
The id of player instance that generated the event.
resource
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
The id of player instance that generated the event.
resource
The
resource that was added to the model.
view
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>
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>
the resource object
Contains information about a resource.
resource has the following properties:
description
A string. Contains a description of the resource. The label property is the primary descriptive string of the resource. The description property may contain expanded information.
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.
label
A string. Contains a label for the resource. This is the primary descriptive string of the resource. If the resource is a Topic, it contains the Topic's title.
namespace
A string. Indicates the type of resource.
Available types are:
cwc.legacy.speaker
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.