Edit in JSFiddle

  $(function () {
        http://jsfiddle.net/5P9x2/


        //revealing modular pattern (like namespaces for javascript)
        //http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript
        var sooper = function () {

            //this is some test data
            var someLines = [
                { 'text': "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,", 'val': 0 },
                { 'text': "eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam ", 'val': 1 },
                { 'text': "voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem ", 'val': 2 },
                { 'text': "sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam ", 'val': 3 },
                { 'text': "eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ", 'val': 4 },
                { 'text': "ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate ", 'val': 5 },
                { 'text': "velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?", 'val': 6 },
                { 'text': "sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam ", 'val': 7 },
                { 'text': "eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ", 'val': 8 },
                { 'text': "ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate ", 'val': 9 },
                { 'text': "voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem ", 'val': 10 },
            ];

            //'close over' this variable in other functions.
            var mov = document.getElementById('mov');//crazy that jquery select does not expose the same dom props and events!

            //knockout view model
            var viewModel = {
                lines: ko.observableArray(someLines),
                currentTime: ko.observable(mov.currentTime),
                play: function () {
                    mov.play();
                },
                pause: function () {
                    mov.pause();
                },
                setTime: function (line) {
                    mov.currentTime = line.val;
                },
                currentLineStyle: function (line) {//this returns a computed so that each line in the array has dynamic behavior
                    //http://stackoverflow.com/questions/13210275/knockoutjs-computed-passing-parameters
                    //http://knockoutjs.com/documentation/computedObservables.html
                    return ko.computed({
                        read: function () {
                            if (line) {//truthy js crazyness, probably not needed.
                                var examine = line.val - this.currentTime();
                                if ((examine < 1)) {
                                    return 'yellow';
                                } else {
                                    return 'white';
                                }
                            } else {
                                return 'white';
                            }
                        },
                        write: function () {
                            //Doesn't get here
                            //debugger;
                            //return 'white';
                        }
                    }, this);
                }
            };

            var wireCurrentTime = function () {//This is the event listener that updates the view model with the current video playback time
                mov.addEventListener("timeupdate", function () {
                    viewModel.currentTime(mov.currentTime);
                });
            };

            var applyBindings = function () {
                ko.applyBindings(viewModel);
            };

            var init = function () {//init is the entry point for this module, no other publicly accessible properties.
                applyBindings();
                wireCurrentTime();
            };


            //public properties of the module
            return {
                'init': init
            };
        }();

        //call the module init
        sooper.init();
    });

<div id="the-vid">
    <video id="mov" width="320" height="240">
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" />
    </video>
    <br/>
    <button data-bind="click:play">Play</button> <button data-bind="click:pause">Pause</button>
    
    <div>
        Current Time: <span data-bind="text:currentTime"></span>
    </div>
    <div data-bind="foreach:lines">
        <p style="cursor: pointer;" data-bind="text:text,click:$root.setTime,css:$root.currentLineStyle($data)"></p>
    </div>
</div>

.yellow {
    background-color: #e1e114;
}

.white {
    background-color: #9a9595;
}