My HTML player application allows users to search for a term and then displays the results along with the time when those words appear. By clicking on a specific sentence, the HTML player will start playing from that location. However, I would like to enhance this functionality by adding a marker on the video player's timeline similar to what we see on YouTube.
https://i.sstatic.net/0gq9C.jpg
Just like YouTube has a yellow marker at a specific time, I want to add a CSS marker at a particular location on the Videogular timeline. https://i.sstatic.net/PpkbG.png
If there is a sentence at 19:00 minutes in the search box, I want to set a yellow marker at 19:00 on the Videogular timeline.
On the click event of the search button:
HTML:
<button class="btn btn-default side-search" type="button" data-ng-click="inlinSearch()"></button>
JS:
var onSearchSuccess = function (response) {
$scope.inlineSearchResult = response.data;
$scope.jsonResult = JSON.parse($scope.inlineSearchResult);
};
$scope.inlinSearch = function () {
var counterSearch = 0;
var textSearch = $scope.searchkey.toLowerCase().trim();
scopraServices.searchWithin(textSearch, videoId)
.then(onSearchSuccess, function () {
alert("Search Operation failed");
});
};
I am using ng-repeat to bind the values on the view:
<section class="scroll-content-container">
<article class="scroll-content" data-ng-repeat="sr in jsonResult" data-ng-click="Seek(sr.Location)">
<a>[{{util.formatTime(sr.Location)}}]</a>
<p ng-bind-html=util.boldText(searchkey,sr.Result[0].Text)></p>
</article>
</section>
Thank you in advance.