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.fn.videoComments = function(options){
var defaults = {
"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'}
],
};
var options = $.extend(defaults, options);
if(!options.commentHolder){
throw "videoComments requires a commentHolder to put the comments in";
}
function setComment(message){
$commentContainer.css({
"marginLeft" : "400px",
"opacity": "0"
}).html(message);
};
var $commentContainer = $("<p></p>");
setComment("");
$(options.commentHolder).append($commentContainer);
function showComments(time){
var foundComments = findComments(time);
$.each(foundComments,function(i,comment){
$commentContainer.animate({"marginLeft":"400px","opacity":".0"}, 600);
setComment(comment.message);
$commentContainer.animate({"marginLeft":"0px","opacity":"1"}, 600);
});
};
function findComments(timeToFind){
var matchingComments = $.grep(options.comments, function(item){
return (item.time == timeToFind);
});
return matchingComments;
};
return $(this).each(function(){
var currentTime = -1;
$(this).on("timeupdate", function(e) {
var localTime = this.currentTime.toFixed();
if(currentTime != localTime){
currentTime = localTime;
showComments(currentTime);
}
});
});
};
$("#video").videoComments({
"commentHolder" : $(".newsticker")
})