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 14:01


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. Expose only parts of the media stream. This is essentially virtual fragment generation. In milliseconds: [start, end, start, end].
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

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