How to apply css mark on videogular time line at specific time


Tags: javascript,html,css,angularjs,videogular

Problem :

I have an html player application where user can search a term ,then its populate the result with the time where those words occurs.On clicking that specific sentence the html player starts playing from that location. But with this functionality I want to add some mark on the videogular time line as we see in youtube .

enter image description here

Like youtube you can see the yellow marker at specific time..same way i want the css marker at the particular location. enter image description here

on right side search box if there is a sentence at 19:00 min then i want to set yellow marker at 19:00 ofvideogular timeline.

on click event of 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");
                  });
};

Using ng-repeat I am binding the value on 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>

Thanks in advance.



Solution :

Here you have a demo: http://videogular.com/demo/#/cue-points Full code example: https://github.com/2fdevs/videogular/tree/master/app

Basically, add a few cuepoints to Videogular and style them with CSS. You have a directive to show your cue points (vg-scrub-bar-cue-points):

HTML

<videogular vg-cue-points="ctrl.config.cuePoints">
    <vg-media vg-src="ctrl.config.sources"></vg-media>

    <vg-controls>
        <vg-play-pause-button></vg-play-pause-button>
        <vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
        <vg-scrub-bar>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
            <vg-scrub-bar-cue-points class="myCuepoints"
                                     vg-cue-points="ctrl.config.cuePoints.myCuepoints"></vg-scrub-bar-cue-points>
        </vg-scrub-bar>
        <vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
        <vg-volume>
            <vg-mute-button></vg-mute-button>
            <vg-volume-bar></vg-volume-bar>
        </vg-volume>
        <vg-fullscreen-button></vg-fullscreen-button>
    </vg-controls>

    <vg-buffering></vg-buffering>
    <vg-overlay-play></vg-overlay-play>
</videogular>

CSS

vg-scrub-bar-cue-points.myCustomCuepoints .cue-point {
    background-color: aqua !important;
}

    CSS Howto..

    How to zoom into a specific location of an image using CSS

    How to grow the width of a div as the width screen decreases using Css?

    How to get better at CSS, laying out designs and UI Programming? [closed]

    How to pop out an image inside a ul li div when the css surrounding it won't let you

    How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [duplicate]

    Understanding how menus work in html5 and css3

    How to create a CSS shade effect with a faded sidebar

    How to position a CSS sprite background image within the element?

    How to target CSS link with JavaScript

    How to write a:visited in inline CSS?

    How to animate all except one feature with CSS

    How to do Icon Prefixes on Select or Multi select Form elements using Material Design CSS?

    How to override CSS :hover?

    How do I fade in a div that has a set opacity?

    How to set border to 0 in this table

    How to Remove - Modify btn-inverse Top Border

    How do I remove all of the borders from an HTML ? [closed]
    Bootstrap is adding a top border to all td elements in .table containers. Adding ! important to your no-borders rule will override that: td { border: none !important; } ...
    Read more

    how to bold words within a paragraph in HTML/CSS?

    How to prevent css missing when exporting some html to excel file?

    How to handle an id tag with '.' in CSS

    How to add a banner inside a div at the bottom?

    How to mark up a layout blocks with the CSS property “display:flex;”?

    How does Wired magazine achieve this thick underline link effect?

    How can I change opacity of an image in css without disturbing the overwritten text's opacity

    How to remove line in the middle? [duplicate]

    How to position label text with css

    How to override CSS

    How to hide text without ID?

    show div border when link is clicked

    How to remove “left” value bootstrap popover