Mimicking Linear TV

The JavaScript API includes a seek() function, to quickly seek to a certain point in a video. This can be combined with some JavaScript Date() logic to schedule a playlist. The playlist automatically starts at the start of an hour, and the current video and position is determined by the time. Just like old-fashioned TV!

Demo

Do note this functionality only works well if your video is streamed using HTTP or RTMP streaming. For regular video downloads, the seeking functionality only works if the file is loaded up to that point!

Code

All functionality is placed in the onReady() listener, which is automatically executed when the player is ready for playback:

<div id="container"></div>

<script type="text/javascript">
    jwplayer("container").setup({
        controlbar: "none",
        file: "/feeds/SI1dZmdA.xml",
        flashplayer: "/jwplayer/player.swf",
        height: 406,
        width: 720
    });

    jwplayer().onReady(function() {
        var seconds = new Date().getMinutes()*60 + new Date().getSeconds();
        var playlist = this.getPlaylist();
        var offset = 0;
        for (var index=0; index < playlist.length; index++) {
            var duration = Math.round(playlist[index]['duration']);
            if(offset + duration > seconds) {
                this.playlistItem(index);
                this.seek(seconds-offset);
                break;
            } else {
                offset += duration;
            }
        }
    });
</script>

Code Walkthrough

• First, the number of seconds in the current hour is calculated.
• Second, the playlist is requested from the player.
• The function then loops through the playlist and compares the duration of that item with the number of seconds. At a certain point it encounters the video and position that matches the current amount of seconds.
• At that point, the functions stops the loop and jwplayer().playlistItem() is called to start this video.
• Last, jwplayer().seek() is also called to seek to the correct start position.