Page History: Player SDK 1.0 : Getting Started
Compare Page Revisions
Page Revision: 2016/04/06 15:36
Embedding the basic 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>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">
<div id="playerIFrameWrapper" class="embed-responsive embed-responsive-16by9"></div>
</div>
</div>
<div class="row" id="statusContainer">
</div>
</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:
uri
For internal usage
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
cwc.sdk.player.video.state.change
< script type="text/javascript">
cwcPlayer.on('cwc.sdk.player.resource.create', function (resourceCreateEvent) {
// resourceCreateEvent
// {uri: , playerId: , resource: }
//
// fires when a new resource is added to the model
});
cwcPlayer.on('cwc.sdk.player.resource.properties.change', function (resourceChangeEvent) {
// resourceChangeEvent
// {playerId: , resource: {data: , uri: }, properties: , view: }
//
// fires when a resource activates or de-activates
});
cwcPlayer.on('cwc.sdk.player.video.state.change', function (mediaStateChangeEvent) {
// mediaStateChangeEvent
// {playerId: , state: }
//
// fires when a change occurs in media playback
});
</script>
{"order":9,"id":"048fd610-7c13-4590-a4ce-51cc88b395e9","label":"G.3. Mondelinge vragen van dhr. Kücük (ID) over bedreigingen moskeeën in
Nederland","description":"","resourceUri":"http://d2b0mvobhojah7.cloudfront.net/api/players/4e99b7b4-3a61-4768-9692-511581b926f5/resources/048fd610-7c13-4590-a4ce-51cc88b395e9","namespace":"cwc.legacy.topic","type":"topic"}