JSFiddle - React, Tailwind, and code Playground

by b_m_h

HTML

<body>
        <div class="newsticker"> 
        </div>
        <br />
        <br />
        <video id="video" controls="controls" autoplay="autoplay" name="media"><source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"></video>
    </body>

CSS

div.newsticker{
        border:1px solid #666666;
        width:100%;
        height:50px;
    }

    .newsticker p{
        height:20px;
        width:150px;
        float:left;
        position:absolute;
    }

JavaScript

jQuery(document).ready(function () {
        var fixedTime = 0;
    	$('#video').on('timeupdate',function(e){
            if(this.currentTime.toFixed() != fixedTime){
                showComments(fixedTime);
                fixedTime = this.currentTime.toFixed()
            }  
    	});

    });	
	var comments = [{'time':'10','message':'hello! 10 secs has past'},{'time':'10','message':'hello! part-2 10 secs has past'},{'time':'15','message':'hello! 15 secs has past'},{'time':'5','message':'hello! 5 secs has past'},{'time':'20','message':'hello! 20 secs has past'}];


	function showComments(time){
	    var coms = findComments(time);
        if(coms[0]){
                $('.newsticker p').animate({"marginLeft":"400px","opacity":".0"}, 600).fadeOut(100);
                $('.newsticker').append("<p style='margin-left:400px;opacity:0'>"+coms[0].message+"</p>");
                $('.newsticker p').animate({"marginLeft":"0px","opacity":"1"}, 600);
        }
	}
	
	function findComments(time){
	    return $.grep(comments, function(item){
	      return item.time == time;
	    });
	}