Timeline Implementation for HTML5 Video Player Subtitles

Posted By : Puneet Sharma | 30-Jun-2017

Overview

Video Timeline is an interactive and intutive platform where any video formats with subtitles can be easily be embedded with html5. The timeline can be fixed with dynamic data which can take parameters of start date, end date and even single date. There is an another option available wherein the time can be automatically adjusted on the axis which varies from hours to seconds.

1) This have to be added inside the body

  <div class="captionbx-1">
    <div class="video-bg">
        <video id="video1"  controls preload="metadata" class="pull-left">
        <source src="{{metaData.file}}" type="video/mp4">
        <track kind="metadata" cue-change src="{{metaData.subs}}" srclang="en" default/>
        Your browser does not support HTML5 video.
        </video>
     </div>
  </div>
     <div class="captionbx-2" >
         <div id="timeline" class="timeline-view"></div>
      </div>

2) you must have the following files in javascript directory

  • ?timeline js

3) Now create the controller to handle the data

$scope.metaData = {

file:"../../../videoes/B729b30d4",
subs:"../../../videoes/subs/B729b30d4.vtt",
videoTag:document.getElementById("video1"),
originalSubModel: {},
keyLen: 0,
copySubModel: {},
currentTime: 0,
currentSubId: 0,
displayArr: [],
init: 0,
filterInitIdx: 0,
filterEndIdx: 100,
isInit: true,
displayArrLen: 3,
notes: [],
noteNode: {},
transcriptId: null
};
 
 
$scope.timelineOptions = function () {
var videoDuration = $scope.metaData.videoTag.duration;
var options = {
editable: false,
max: new Date(Math.floor(videoDuration * 1000) + new Date(1970, 0, 1).getTime()),
min: new Date(1970, 0, 1),
start: 10000,
end: 10000,
height: '80px',
zoomable: true,
zoomMin: 10000,
zoomMax: videoDuration * 1000,
align: 'left',
type: 'range',
showCurrentTime: true,
//timeAxis: {scale: 'minute', step: 1},
stack: false,
showMajorLabels: false,
dataAttributes: ['id'],
format: {
minorLabels: {
second: 'mm:ss',
minute: 'mm:ss',
},
},
};
 
return options;
 
};
 
$scope.initializeTimelineData = function () {
$scope.getTimeLineData();
var items = new vis.DataSet($scope.metaData.timelineData);
var timeline = new vis.Timeline(container, items, $scope.timelineOptions());
var isTimelineMoved = false;
 
var video = $('video');
video.on('timeupdate', function () {
timeline.setSelection($scope.metaData.currentSubId);
$scope.changeCue();
});
 
 
timeline.on('pan', function (e) {
isTimelineMoved = true;
var startingTime = timeline.getWindow(event)
 
var sec = startingTime.start.getHours() * 60 * 60 + startingTime.start.getMinutes() * 60 + startingTime.start.getSeconds() + '.' + startingTime.start.getMilliseconds();
$scope.metaData.videoTag.currentTime = sec;
$scope.metaData.videoTag.pause();
$timeout(function () {
isTimelineMoved = false;
}, 100);
});
 
 
container.onclick = function (event) {
var getTimelineTime = timeline.getEventProperties(event)
var timelineCurrentTime = getTimelineTime.time.getHours() * 60 * 60 + getTimelineTime.time.getMinutes() * 60 + getTimelineTime.time.getSeconds() + '.' + getTimelineTime.time.getMilliseconds();
 
$scope.metaData.videoTag.currentTime = timelineCurrentTime;
}
 
$scope.metaData.videoTag.onseeking = function () {
 
$scope.metaData.videoTag.pause();
$(".pause").hide();
$(".play").show();
 
 
if (!isTimelineMoved) {
 
var startingTime = timeline.getWindow(event)
startingTime.start = new Date(new Date(1970, 0, 1).getTime() + Math.floor($scope.metaData.videoTag.currentTime * 1000));
timeline.moveTo(startingTime.start);
 
}
};
 
$scope.timelineVideoEvent(timeline);
 
timeline.moveTo(new Date(1970, 0, 1));
 
};

 

 

 

timeline

About Author

Author Image
Puneet Sharma

Puneet is an experienced Lead UI Developer, having good knowledge of Angular Js, TypeScript, HTML5, CSS3, Javascript, Jquery, Photoshop.

Request for Proposal

Name is required

Comment is required

Sending message..