Controlbar Markers For JWPlayer 7 Adds customisable markers to the JWPlayer 7 Controlbar

This example displays the basic configuration and use of the controls marker feature. With the Javascript plugin provided is integrated markers navigation.

Introduction



The Controlbar Markers plugin enables adding customisable markers to the controls which could be used for chapter marker seek points.

This feature simply requires a set of marker start times in seconds with an optional end time configured for the video. If none are configured on startup they can be added using the Javascript api methods instead.

The marker navigation feature allows to seek back and forth between the marker region.

The chapter marker list navigation feature creates a styleable sidebar navigation with caption text or can be displayed using horizontal thumbnails.

Overrides the player time tooltip with a caption and thumbnail if configured for the marker while hovering.

Native Html5 TextTrack cues are created where supported or for browsers that don't support the Html5 video TextTrack api or Firefox that did not integrate cuechange events the Flowplayer 6 cuepoint system will be used instead.

The markers plugin supports configuring via WebVTT Text Tracks Format much like for the subtitles feature however it also supports adding custom data in JSON format not just text for thumbnails etc.



The Controlbar Markers plugin enables adding customisable markers to the controls which could be used for chapter marker seek points.

This feature simply requires a set of marker start times in seconds with an optional duration time configured on each playlist item or clip Flowplayer config.

The marker navigation feature allows to seek back and forth between the marker region.

Features

  • Styleable video markers for both Flash and Html5 video formats.
  • Enables playlist support to update to new markers and cuepoints.
  • Easy to configure on the clip and playlist configs.
  • Ability to dynamically set video marker regions using the duration config which resizes to the controls plugin scrubber boundaries.
  • Enables alternating colours and sizes of markers with a few config options.
  • Enalbes adding colours and styles for each marker from config options.
  • Marker navigation buttons on the controlbar to seek to next and previous markers. Javascript Plugin Only.
  • Chapter / marker cuepoint events feature not available by default.
  • Javascript api for dynamically managing the markers.
  • Generating clickable chapter navigation lists when captions are configured on the markers.
  • JSON configurations in WebVTT format to support custom configs like text and thumbnails.
  • Generates native Html5 TextTrack cuepoints or player specific cuepoints and events.
  • Styleable video markers using css.
  • Marker navigation buttons on the controlbar to seek to next and previous markers.
  • Generating clickable chapter navigation lists when captions are configured on the markers.
  • Styleable marker tooltip displaying marker information if a caption or thumbnail is configured.
  • Javascript api for dynamically managing the markers.
  • Various marker icons using example web fonts which can be customised.

Known Issues For Flash Version

  • JWPlayer 7 API has no functionality for cuepoints, a feature has been provided in it's place.
  • There are limitations with the JW Player 7 api preventing buttons to be added to the controlbar therefore no custom marker button support is possible for now. Javascript api methods has been enabled for this.
  • Html5 Text Track API support is still work in progress and changes being made regularly.
  • As of now Firefox never implemented the cuechange event because they deemed it unimportant therefore native cuepoint support will be disabled if the event is not implemented and a player specific cuepoint event is used.
  • For browsers that support the API where WebVTT is used, these still need to be loaded and cues added dynamically due to inconsistent cross origin support where both IE and Safari will fail as neither browsers fully implemented CORS support for video elements.

(Current Version 4.0.0)

Compatibility

  • JW Player 7 and above

Plugin Available For Purchase via Paypal


License Options
Domain(s)

(Version 4.0.0)

License Information

The Controlbar Video Markers plugin is a once off commercial license with updates and support to the Controlbar Video Markers plugin only. JW Player related questions and support may be provided on their forums at http://www.longtailvideo.com/support/forums/jw-player/

  • Single Domain License - Suitable for small sites with updates and unlimited support included.
  • Multi Domain License - Suitable for larger sites and video platform sites with updates, feature requests and unlimited priority support included.
  • Single Domain Not For Profit License - Suitable for not for profit organisations.

Note:

With your purchase please provide your domains to be provided with your licensed plugin. New domains need to be requested manually for the moment.

Refund Policy:

Please try the demo before purchase or request for a 60 day site demo. Refunds will not be issued unless under some circumstances sorry for the inconvenience.

Demo

Contact for a site or local demo download.

Examples

Basic example using the feature.

Flowplayer configuration

The `markers` clip / playlist item property sets the marker regions for each clip:


(function(jwplayer) {

    var player = jwplayer("player").setup({
            flashplayer: "@PLAYER_SWF@",
            width: 660,
            height: 350,
            playlist: [
                        {
                            sources: [
                                        { type: "webm", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.webm"},
                                        { type: "mp4", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4"},
                                        { type: "ogg", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.ogv"},
                                        { type: "rtmp", file: "mp4:bitrate/big_buck_bunny_600k.mp4"},
                                     ],
                                     streamer: "rtmp://rtmp.electroteque.org/cfx/st",
                                     markers: [
                                                {startTime: 120},
                                                {startTime: 300},
                                                {startTime: 510}
                                     ]
                        }
            ],
            plugins: {
                "https://static.electroteque.org/js/jw7/videomarkers-4.0.0.js": {
                    enableButtons: true
                }
            }


    });




          player.on("ready",function(event) {

            player.on("cuepoint",function(cue) {
                console.log("onCuepoint: ", cue);
            });

          });



})(window.jwplayer);

Video Markers Configuration

Video Marker Clip Configuration

To configure each clip in a playlist with their own markers use a custom clip property `markers` with an object config of a start time and an optional duration in seconds.


{
    file: "mp4:big_buck_bunny_480p_h264.mp4",
    provider: "rtmp",
    streamer: "rtmp://rtmp.electroteque.org/cfx/st",
    markers: [
        {startTime: 120},
        {startTime: 300},
        {startTime: 510}
    ]
}

Video Marker Options

property / datatype default description
alternate
boolean
false Enable alternating colours and use the alternate css styles.
isDuration
boolean
false Enable duration markers using a specified endTime.
enableButtons
boolean
false Add marker navigation buttons to the controlbar. Javascript Plugin Only.
container
string
Css selector for a generated chapters list container.

Controls Markers with caption text, thumbnails and chapter lists Example

This example demonstrates configuring with caption text and thumbnail previews.

When caption text is configured or with thumbnails they will appear in the time slider tooltip.

If the `container` config is enabled this will generate a list of styleable chapters that will become highlighted on cuepoint events.


Configuring caption text and thumbnails


{startTime: 120, text: "Marker 1 Hello Long Text", thumbnail: "images/thumbnails/big_buck_bunny_400k-1.jpeg"},


(function(jwplayer) {

    jwplayer("thumbnails").setup({
            flashplayer: "@PLAYER_SWF@",
            width: 660,
            height: 350,
            playlist: [
                                            {
                                                sources: [
                                                    { type: "webm", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.webm"},
                                                    { type: "mp4", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4"},
                                                    { type: "ogg", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.ogv"},
                                                    { type: "rtmp", file: "mp4:bitrate/big_buck_bunny_600k.mp4"}
                                                ],
                                                streamer: "rtmp://rtmp.electroteque.org/cfx/st",
                                                markers: [
                                                                {startTime: 120, text: "Marker 1 Hello Long Text", thumbnail: "images/thumbnails/big_buck_bunny_400k-1.jpeg"},
                                                                {startTime: 300, text: "Marker 2 Hello Long Text", thumbnail: "images/thumbnails/big_buck_bunny_400k-2.jpeg"},
                                                                {startTime: 510, text: "Marker 3", thumbnail: "images/thumbnails/big_buck_bunny_400k-3.jpeg"}
                                                ],
                                            }
            ],
            plugins: {
                "https://static.electroteque.org/js/jw7/videomarkers-4.0.0.js": {
                    container: "#markers",
                    enableButtons: true
                }
            }
    });

})(window.jwplayer);

Controls Markers with alternating colors and height Example

This example demonstrates configuring the plugin with alternating colors and heights to display variation.


Alternating Style For Javascript Version

The Javascript version uses a customisable alternating style `alternate` which can be configured like so:


.markers.marker.alternate {
    background:#999999;
}

(function(jwplayer) {


    jwplayer("alternate").setup({
            flashplayer: "@PLAYER_SWF@",
            width: 660,
            height: 350,
            playlist: [
                                            {
                                                sources: [
                                                    { type: "webm", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.webm"},
                                                    { type: "mp4", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4"},
                                                    { type: "ogg", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.ogv"},
                                                    { type: "rtmp", file: "mp4:bitrate/big_buck_bunny_600k.mp4"}
                                                ],
                                                streamer: "rtmp://rtmp.electroteque.org/cfx/st",
                                                markers: [
                                                                        {startTime: 120},
                                                                        {startTime: 300},
                                                                        {startTime: 510}
                                                ]
                                            }
            ],
            plugins: {
                "https://static.electroteque.org/js/jw7/videomarkers-4.0.0.js": {
                    alternate: true
                }
            }
    });

})(window.jwplayer);

Controls Markers with durations Example

This example demonstrates configuring the plugin with duration marker regions.



(function(jwplayer) {


    jwplayer("duration").setup({
            flashplayer: "@PLAYER_SWF@",
            width: 660,
            height: 350,
            playlist: [
                    {
                        sources: [
                            { type: "webm", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.webm"},
                            { type: "mp4", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4"},
                            { type: "ogg", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.ogv"},
                            { type: "rtmp", file: "mp4:bitrate/big_buck_bunny_600k.mp4"}
                        ],
                        streamer: "rtmp://rtmp.electroteque.org/cfx/st",
                        markers: [
                            {startTime: 120, endTime: 180},
                            {startTime: 300, endTime: 360},
                            {startTime: 510, endTime: 570}
                        ]
                    }
            ],
            plugins: {
                "https://static.electroteque.org/js/jw7/videomarkers-4.0.0.js": {
                    alternate: true,
                    isDuration: true
                }
            }
    });

})(window.jwplayer);

Controls Markers with custom colours and styles Example

This example demonstrates configuring the plugin with custom colour and styles for each marker.



markers: [
    {startTime: 120, style: "one" },
    {startTime: 300, style: "two" },
    {startTime: 510, style: "three" }
]

The `color` property is used for the Flash version and the `style` property is used for the Html5 version referencing a css style.


(function(jwplayer) {


    jwplayer("colours").setup({
            flashplayer: "@PLAYER_SWF@",
            width: 660,
            height: 350,
            playlist: [
                    {
                        sources: [
                            { type: "webm", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.webm"},
                            { type: "mp4", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4"},
                            { type: "ogg", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.ogv"},
                            { type: "rtmp", file: "mp4:bitrate/big_buck_bunny_600k.mp4"}
                        ],
                        streamer: "rtmp://rtmp.electroteque.org/cfx/st",
                        markers: [
                            {startTime: 120, style: "one" },
                            {startTime: 300, style: "two" },
                            {startTime: 510, style: "three" }
                        ]
                    }
            ],
            plugins: {
                "https://static.electroteque.org/js/jw7/videomarkers-4.0.0.js": {

                }
            }
    });

})(window.jwplayer);

JS Api Example

This example demonstrates using the javascript api to dynamically add, remove and update the markers.



(function(jwplayer) {


    var player = jwplayer("jsapi").setup({
            flashplayer: "@PLAYER_SWF@",
            width: 660,
            height: 350,
            playlist: [
                                            {
                                                sources: [
                                                    { type: "webm", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.webm"},
                                                    { type: "mp4", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4"},
                                                    { type: "ogg", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.ogv"},
                                                    { type: "rtmp", file: "mp4:bitrate/big_buck_bunny_600k.mp4"}
                                                ],
                                                streamer: "rtmp://rtmp.electroteque.org/cfx/st",
                                                markers: [
                                                                        {startTime: 120},
                                                                        {startTime: 300},
                                                                        {startTime: 510}
                                                ]
                                            }
            ],
            plugins: {
                "https://static.electroteque.org/js/jw7/videomarkers-4.0.0.js": {

                }
            }
    });



})(window.jwplayer);

function addMarker(e) {
        e.preventDefault();

        var player = jwplayer('jsapi');

        player.addMarker(100);
    }


    function addMarkers(e) {
        e.preventDefault();

        var player = jwplayer('jsapi');

        player.addMarkers(
                                   [
                                       { startTime: 10,  color:"#00CC33" },
                                       { startTime: 20 },
                                       { startTime: 30 }
                                   ]
                           );


    }

    function removeMarkers(e) {
        e.preventDefault();

        var player = jwplayer('jsapi');

        player.removeMarkers([10,20,30]);

    }

    function getMarkers(e) {
        e.preventDefault();

        var player = jwplayer('jsapi');

        console.log("Markers: " + player.getMarkers());


    }

    function removeMarker(e) {
        e.preventDefault();

        var player = jwplayer('jsapi');

        player.removeMarker(100);


    }

    function updateMarkers(e) {
        e.preventDefault();

        var player = jwplayer('jsapi');

        player.updateMarkers();


    }

    function prevMarker(e) {
        e.preventDefault();

        var player = jwplayer('jsapi');

        player.prevMarker();

    }

    function nextMarker(e) {
        e.preventDefault();

        var player = jwplayer('jsapi');

        player.nextMarker();


    }

$(function() {
    $("#addmarker").click(addMarker);
    $("#addmarkers").click(addMarkers);
    $("#removemarker").click(removeMarker);
    $("#removemarkers").click(removeMarkers);
    $("#getmarkers").click(getMarkers);
    $("#updatemarkers").click(updateMarkers);
    $("#prevmarker").click(prevMarker);
    $("#nextmarker").click(nextMarker);
});


JavaScript API

Methods

method returns description
addMarker(position) Adds a marker at the specified position in seconds.
removeMarker(position) Removes a marker at the specified position in seconds.
addMarkers(markers) Adds an array of markers in the same format as the clip config ie {startTime: 30, duration: 30}.
removeMarkers(array) Removes an array of marker start times in seconds.
getMarkers() Get the current markers list.
updateMarkers() Refreshes the markers. Useful if the markers config has been updated directly on the clip.
prevMarker() Skip to the previous marker. Required by Flash due to controlbar limitations and no custom marker button support.
nextMarker() Skip to the next marker. Required by Flash due to controlbar limitations and no custom marker button support.