Companywebcast API Wiki

Page History: Player SDK 1.0 : Getting Started

Compare Page Revisions



« Older Revision - Back to Page History - Newer Revision »


Page Revision: 2016/04/06 15:44


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

Fires when a resource activates or de-activates.
Returns a resourceChangeEvent.

properties of resourceChangeEvent are:

uri
For internal usage
playerId
The id of player instance that generated the event.
resource
The resource that was added to the model.
view
The view.


cwc.sdk.player.video.state.change
Fires when a state change in media playback occurs.
Returns a mediaStateChangeEvent.

properties of mediaStateChangeEvent are:

playerId
The id of player instance that generated the event.
state
The state.




< 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"}