Timeline Implementation for HTML5 Video Player Subtitles

Posted By : Puneet Sharma | 30-Jun-2017

html5

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);

}

};