Markup content on the timeline

1. Using elements

Any element can be tied to the timeline by selecting the location mode on timeline

With the help of absolute and relative margins margins you can position the element in the right place relative to the progress bar, adjust the clickability and the hide mode if necessary. If you assign the command seektome to the element, the playback will go to its position. All elements have the ability to assign an DOM identifier to control outside and you can control the position of the element with the custom parameter in the player code.

var player = new Playerjs({id:"player", file:"//site.com/media.mp4", custom:[{id1:"margin-left:49%"},{id2:"off"}]});

In this example, the element with id1 will be shifted to 49% from the start of the timeline and disabled element with id2. How it all works can be seen in this template where the hockey match is marked.

2. Using markup option

In the PRO there is a special markup option Elements / Timeline / Markup, which is intended for marking events on the timeline.

Information is passed to the player in the code by the object points where the time of the mark in seconds is indicated.

var player = new Playerjs({id:"player", file:"//site.com/audio.mp3", points:[{time:12},{time:33}]});

You can change the width, opacity and color of the points in the builder. These parameters can also be specified separately for each point the code.

points:[{time:12},{time:33, width:10, opacity:0.5, color:"#ff0000"}]

If a playlist is used, then it is better to point the points inside each playlist position separately. In the Javascript API also added a parameter for dynamic update points.

player.api("points",[{time:15},{time:45},{time:51}]);