Markup content on the timeline (timestamps)

There are two ways to mark content on the progress bar for navigation or for marking any events.

Points

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

In the settings or in the code you can change the width of the label by specifying the number of pixels or seconds (in quotes and with the letter s at the end).

points:[{time:12, width:5},{time:33, width:"10s"}]

Since version 15, you can also specify opacity, color, text that will be displayed when hovering over and styles by the textstyle option separately for each point.

{time:10, width:"10s", opacity:0.5, color:"#ff0000", text:"Description", textstyle:"font-size:150%"}

Example:

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

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.

---