Page History: Player SDK 1.0 : Getting Started
Compare Page Revisions
Page Revision: 2016/04/06 13:51
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.
start
An integer. In milliseconds, the position from where the Player will commence playback.
offsets
An array of integers. Each odd position in this array is to be filled with the start position, in milliseconds, of the fragment. Each even position in this array is to be filled with the end position, in milliseconds, of the fragment.
< script type="text/javascript">
var cwcPlayer = cwc.iframe.player.client.create({
id: 'customer/code',
start: 5000,
offsets: [20000, 40000, 50000, 80000],
display: 2 | 4 | 16
});
</script>
<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 iframeWrapper = cwc.iframe.player.client.create({
id: 'customer/code',
start: 5000,
offsets: [20000, 40000, 50000, 80000],
display: 2 | 4 | 16
});
document.getElementById('playerIFrameWrapper').appendChild(iframeWrapper.element);
iframeWrapper.on('cwc.sdk.player.resource.create', function (resourceCreateEvent) {
// resourceCreateEvent
// {uri: , playerId: , resource: }
//
// fires when a new resource is added to the model
});
iframeWrapper.on('cwc.sdk.player.resource.properties.change', function (resourceChangeEvent) {
// resourceChangeEvent
// {playerId: , resource: {data: , uri: }, properties: , view: }
//
// fires when a resource activates or de-activates
});
iframeWrapper.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"}