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>
    <p>
        <strong>Expected result:</strong> Player is in a playing state, at a time just under 200 seconds (3:20) into the video.
    </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 = 'M2IxOWFjNWM3NGM5YzhjZjMyNTQ1Mzk1OGI2OWQ3MTIzMjhlZDZiYXwxNDc4NjExOzE0Nzg2MTE7MTQyMTE3NjQ4OTswOzQwMTg7bGpzY290dDtzdmlldzoxX24wODBhN2w0LHByaXZhY3ljb250ZXh0OktNUzUsZW5hYmxlZW50aXRsZW1lbnQ=';

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,
        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');
        
        runSeeks();
    }
});

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

window.runSeeks = function() {
    var i = 10;
    seekTo(i);
    setTimeout(function run() {
        i += (0.5 + (Math.random()*1))
        seekTo(i);
        if (i < 200) {
            setTimeout(run, 0.1);
        }
    }, 0.1);
};