Comments for Creating a video player with time markers - step by step

[phinjensen]

Comments for https://www.endpointdev.com/blog/2016/03/creating-video-player-with-time-markers/ By Piotr Hankiewicz

To enter a comment:

1. Log in to GitHub
2. Leave a comment on this issue.

[phinjensen]

original author: pete mulder
date: 2016-07-04T13:03:28-04:00

This was easy, thanks :)

Now I want to combine markers and playlist functionality. Ideally, my markers would be stretched over the timeline of the total (time of) vids in playlist. If that's not doable (I failed badly in my attempts), would you be able to tell how I can dynamically update markers on the timeline. Pleases note that vids don't have the same length, so the timeline needs to be rerendered as welll. Any (!) help would be highly appreciated!

cheers, pete

[phinjensen]

original author: Peter Hankiewicz
date: 2016-07-04T14:22:37-04:00

Hi Pete,

It is surely possible to stretch markers over the timeline but it will require creating a new plugin to create ranges. You can try to using this one: https://github.com/danielcebrian/rangeslider-videojs and create multiple ranges and disable a slider also.

Updating markers is pretty easy: videoObject.markers({ markers: markerArray });

Peter

[phinjensen]

original author: pete mulder
date: 2016-07-04T14:39:21-04:00

Thank Peter, I forked rangeslider-videojs and will have a look. Will try to keep you posted of how I get one. I may nudge you when I get stick, but I promise not to overdo it - and try not to :)

[phinjensen]

original author: Yippie-ki-yay
date: 2016-07-08T15:59:01-04:00

Hi Peter. About this plugin, I've been trying to insert pauses on the marks (including commmands in the "onMarkerReached" options, as explain by the author in the forum he post the plugin; but I don't make it work... do you mind to help?

Thanks

Seth

[phinjensen]

original author: Peter Hankiewicz
date: 2016-07-08T16:18:26-04:00

Hi Yippie-ki-yay,

take a look at this example, it works just fine here:

var video = videojs('example_video_1');

//load markers video.markers({ markers: [ {time: 9.5, text: "this"}, {time: 150, text: "is"}, {time: 250,text: "so"}, {time: 370, text: "cool"} ], onMarkerReached: function () { video.pause(); } });

[phinjensen]

original author: Apurv Gandhwani
date: 2016-10-13T14:15:37-04:00

Hi. I got the markers in mt timeline. Now I want to have markers of different color, say few markers of red color and few markers of green color, on a single timeline. How can I achieve this. Please help, I have been struggling with this. I tried to pass two arrays in markers array [ [],[] ] . But it didn't work.

[phinjensen]

original author: Peter Hankiewicz
date: 2016-10-14T03:30:22-04:00

Hi Apurv,

when creating markers try this: video.markers({ markers: [ {time: 9.5, text: "this", class: "marker-red"}, {time: 16, text: "is", class: "marker-blue"}, {time: 23.6,text: "so", class: "marker-red"}, {time: 28, text: "cool", class: "marker-blue"} ]; );

Then, in your CSS file set: .marker-red { background-color: red; } .marker-blue { background-color: blue; }

Good luck!

[phinjensen]

original author: Apurv Gandhwani
date: 2016-10-15T07:59:59-04:00

Thanks for the previous solution Peter. I am facing one more problem. I want to jump to markers whenever I click a button. For example, say I have three markers on my timeline and three ui button for each of the marker. When I click first button, I should get jumped to first marker and same for other two buttons.

[phinjensen]

original author: Peter Hankiewicz
date: 2016-10-18T06:25:29-04:00

Hi Apurv,

you can get a list of markers with:

var markers = player.markers.getMarkers();

Then you need to find a DOM element for each of the markers like this:

// foreach markers var markerDiv = videoWrapper.find(".vjs-marker[data-marker-key='" + marker.key +"']"); // end foreach

To jump to any marker you can use:

markerDiv.click();

[phinjensen]

original author: Apurv Gandhwani
date: 2016-10-19T07:37:31-04:00

But how can I connect this thing with the buttons in another component of another parent ?

[phinjensen]

original author: Peter Hankiewicz
date: 2016-10-19T16:43:21-04:00

If you have the first button: 'button onclick="jumpToMarker(0)"'.

Then you need to create a function called jumpToMarker and using this function find an appropriate marker using the logic from my previous comment.

[phinjensen]

original author: Apurv Gandhwani
date: 2016-11-10T05:17:23-05:00

@Peter can I have functionality like this: I have two different sets of markers array of json objects, Array A and Array B. Below the video player I have two buttons, Button A and Button B. Now by default I show markers array A on video time line. Now when I click button B markers should change on timeline to array B. Same for Button A - when I click it Array B show come as markers. and I want this not to affect the video i.e. player should not reload the video and start it from begining everytime I change markers by button.

Is it possible to achieve this.

[phinjensen]

original author: Peter Hankiewicz
date: 2016-11-10T12:34:33-05:00

Yes Apurv, you can do it.

When one of these buttons is clicked use player.markers.removeAll() to clean a list of markers and then just reload the list with new objects.

[phinjensen]

original author: Apurv Gandhwani
date: 2016-11-10T13:39:47-05:00

How will I reload the list?

Will it be something like this:

handleButtonClick(button_id){

switch(button_id){ case "A": player.markers.removeAll(); //to remove markers player.markers({ //to add new markers
markerStyle: {}, markers: ArrayA,

    });

case "B":
   player.markers.removeAll();  //to remove markers
   player.markers({             //to add new markers     
        markerStyle: {},
        markers: ArrayB,

    });

} }

[phinjensen]

original author: Peter Hankiewicz
date: 2016-12-20T16:35:27-05:00

Sorry for a late reply.

Try to use player.markers.add() instead of player.markers().

[phinjensen]

original author: Apurv Gandhwani
date: 2017-02-13T13:17:18-05:00

Hello Peter. I have implemented the markers. I want to have markers such that they have custom width/length on the basis of start time and endtime I pass. How can I do it? There is this function in marker.js " function createMarkerDiv(marker, duration) " but I don't know whether to use this for it or nor? and if yes then How to use it?

[phinjensen]

original author: Peter Hankiewicz
date: 2017-02-13T13:55:21-05:00

Hi Apurv,

I don't think it's possible. You would need to rewrite the markers library to achieve it.

[phinjensen]

original author: Apurv Gandhwani
date: 2017-02-13T14:10:39-05:00

Okay I have an idea but I need your suggestion for it. Here is how I am doing it right now

I take the length of playing bar of videojs in px. Then I divide it by duration (in secconds) of the video. Let's call it "A". Then I do markerLength = (startTime-endTime)*A. And then I set this markerLength as width of marker in markers.js like this

markerDiv.css(setting.markerStyle) .css({ "width": markerLength, "margin-left": -parseFloat(markerDiv.css("width")) / 2 + 'px', "left": getPosition(marker) + '%', })

[phinjensen]

original author: Peter Hankiewicz
date: 2017-02-14T09:45:34-05:00

Looks promising, I can see at least one issue:

markerLength = (startTime-endTime)*A

should be

markerLength = (endTime-startTime)*A

[phinjensen]

original author: dheerprashant jain
date: 2017-03-03T01:25:01-05:00

Sir how can I avoid writing {time:---} multiple times.I tried making a string of the same for multiple time entries but it shows error at the console like this : Cannot create property 'key' on string '{time:2384},{time:2892},{time:722},{time:1084},{time:600},{time:2622},{time:2658},{time:2706},{time:2704},{time:2468},{time:984},{time:2150},{time:1816},{time:136},{time:956},{time:884},{time:620},{time:1868},{time:2744},{time:2866},{time:224},{time:1316},{time:1410},{time:1728},{time:1830},{time:2158},{time:2570},{time:3168},{time:2436},{time:3408},{time:1516},{time:1864},{time:1264},{time:668},{time:270},{time:2054},{time:1652},{time:3204},{time:1956},{time:1658},{time:1808},{time:458},{time:890},{time:3078},{time:3206},{time:2884},{time:548},{time:2002},{time:976},{time:152}"'

[phinjensen]

original author: Peter Hankiewicz
date: 2017-03-03T08:27:25-05:00

Hi,

could you post your code here? Or send a link to Github or Gist.

[phinjensen]

original author: dheerprashant jain
date: 2017-03-05T13:08:47-05:00

Hi, Sir I solved that problem. Sir I am not good with css can you please help me build the progress bar as shown in your first page ??

[SandraNanou]

Hi!

Thanks for your code, I really appreciate it Like Apurv Gandhwani before, I'm trying to add several buttons below players to jump to markers (button 1 to marker 1,button 2 to marker 2...). I've tried creating a function "jumpToMarker()" but with no sucess. Could you pleaase help?

Thanks again, Sandra

[wideeyedtech]

can you please give the example of how to use the video-markers with react.

[seabasss]

Hey,

I want to use this with videojs-playlist, but I can't find a way to update the new markers properly when switching track. It seems like videojs-markers gets confused to which timeline it's supposed to put the markers on.

When I'm running this:

player.on('beforeplaylistitem', function() {
   this.markers.removeAll();
});

player.on('playlistitem', function() {
   this.markers({//...});
});

I get this error:

this.markers is not a function

I've also tried:

player.on('beforeplaylistitem', function() {
   this.markers.removeAll();
});

player.on('playlistitem', function() {
   this.markers.add([//...]);
});

And that doesn't give me an error, but the markers are off as soon as I switched track in the playlist. Is there a way to run a this.markers.update() or similar? Thanks!