JSFiddle - React, Tailwind, and code Playground

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 () {
    	$('#video').on('timeupdate',function(e){
    	        showComments(this.currentTime);  
    	});

    });	
	var comments = [{'time':'10','message':'hello! 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 comments = findComments(time);
	    $.each(comments,function(i,comment){
            $('.newsticker p').animate({"marginLeft":"400px","opacity":".0"}, 600).fadeOut(100);
            $('.newsticker').append("<p style='margin-left:400px;opacity:0'>"+comment.message+"</p>");
            $('.newsticker p').animate({"marginLeft":"0px","opacity":"1"}, 600);
	    });
	}
	
	function findComments(time){
	    return $.grep(comments, function(item){
	      return item.time == time.toFixed();
	    });
	}