JSFiddle - React, Tailwind, and code Playground

by cstigler

HTML

<script src="http://cdnapi.kaltura.com/p/1478611/sp/147861100/embedIframeJs/uiconf_id/15796262/partner_id/1478611"></script>
<div id="kdp"></div>
<div>
    <p>Current time: <span id="currentTime"></span>

    </p>
    <button onclick="seekTo(1);">Seek to 1</button>
    <button onclick="seekTo(5);">Seek to 5</button>
    <button onclick="seekTo(8);">Seek to 8</button>
    <button onclick="seekTo(9);">Seek to 9</button>
    <button onclick="seekTo(10);">Seek to 10</button>
    <button onclick="seekTo(11);">Seek to 11</button>
    <button onclick="seekTo(12);">Seek to 12</button>
    <p class="seeked-to">Just seeked to: <span id="seekedTo"></span>

    </p>
</div>

CSS

#currentTime {
    font-weight: bold;
}
.seeked-to {
    color: #822;
    font-size: 18px;
}
#seekedTo {
    font-weight: bold;
}

JavaScript

var PARTNER_ID = 1478611;
var PLAYER_ID = 15796262;
var VIDEO_ID = '1_n080a7l4';
var VIDEO_KS = 'NGNiNDU3ODBjNjZhODRmYjQ3MzM5Y2UyNWZhYmJjMjVjMWU0MDFhYXwxNDc4NjExOzE0Nzg2MTE7MTM4OTEyOTY1OTswOzEyMzg0O2xqc2NvdHQ7c3ZpZXc6MV9uMDgwYTdsNCxwcml2YWN5Y29udGV4dDpLTVM1LGVuYWJsZWVudGl0bGVtZW50';

var kdp;
var postSeek;

kWidget.embed({
    targetId: 'kdp',
    wid: '_' + PARTNER_ID,
    uiconf_id: PLAYER_ID,
    entry_id: VIDEO_ID,
    flashvars: {
        autoPlay: true,
        ks: VIDEO_KS,
        streamer: 'rtmp',
        mediaProxy: {
            mediaPlayFrom: 0
        }
    },
    params: {
        wmode: 'opaque'
    },
    readyCallback: function (playerId) {
        kdp = document.getElementById(playerId);

        kdp.kBind('playerSeekStart', function () {
            console.log('playerSeekStart');
        });
        kdp.kBind('playerSeekEnd', function () {
            postSeek = true;
            console.log('playerSeekEnd');
        });
        kdp.kBind('mediaError', function () {
            console.log('mediaError');
        });
        kdp.kBind('playerUpdatePlayhead', function (time) {
            console.log('playerUpdatePlayhead: ' + time);
            $('#currentTime').text(time);

            if (postSeek) {
                $('#seekedTo').text(time);
                $('#seekedTo').fadeIn();
                postSeek = false;
            }
        });
        kdp.kBind('playerStateChange', function (state) {
            console.log('playerStateChange: ' + state);
        });
        
        kdp.sendNotification('doPlay');
    }
});

window.seekTo = function (time) {
    kdp.sendNotification('doSeek', time+0.15);
};