How to add custom breakpoints to a JW player

Question

Say I have an array of time in seconds.

var points = [5, 30, 50]; 

So, when the jw player is initialized, I want to read this array, and then put the markers on the timeline.

And as soon as the search string reaches a key point, I want to call a user-defined function that does something.

The Jw documentation is very simple, but I found this - Adding Section Markers

I need something similar to this with full control over key points.

Is there a way to achieve this or should I use a custom control panel?

Answer 1

I implemented the same thing by pausing the video at specific points. When paused, the user can resume the video by clicking on the link (the controls are deleted when paused).

I have the following HTML where the player and HTML dot points are placed:

 <div class="row"> <div class="col-xs-12 col-md-5"> <div id="myElement">Loading the player...</div> </div> <div class="col-xs-12 col-md-7"> <div id="on10seconds" class="hidden"> <p>Show after 10 seconds. <a href="#" class="positionInfoLink" data-position="10">Continue...</a></p> </div> <div id="on25seconds" class="hidden"> <p>Show after 25 seconds. <a href="#" class="positionInfoLink" data-position="25">Continue...</a></p> </div> <div id="on50seconds" class="hidden"> <p>Show after 50 seconds. <a href="#" class="positionInfoLink" data-position="50">Continue...</a></p> </div> </div> </div> 

And the following JavaScript:

 var positions = [10, 25, 50]; var positionsSeen = []; var player = jwplayer("myElement").setup({ file: "/Content/videos/big_buck_bunny.mp4" }); player.onTime(jwPlayerOnTime); function jwPlayerOnTime(onTimeInfo) { var currentPosition = onTimeInfo.position; for (var i = 0; i < positions.length; i++) { var position = positions[i]; var isPositionSeen = positionsSeen.indexOf(position) != -1; // Within 2 seconds, so users can't skip to see the extra information displayed when pausing. var isOnOrPastPosition = currentPosition > position && currentPosition <= position + 2; if (isPositionSeen == false && isOnOrPastPosition) { positionsSeen.push(position); player.pause(true); // Disable the controls, so the video can only be resumed with the custom controls. player.setControls(false); $("#on" + position + "seconds").removeClass("hidden"); } } } $(document).ready(function () { $(".positionInfoLink").on("click", function (e) { e.preventDefault(); var position = $(this).data("position"); // 10, 25 or 50. $(this).parent().addClass("hidden"); player.play(true); // Enable the controls, so the video can be paused manually again. player.setControls(true); }); });