This example displays and in depth configuration with playlist support and use of the controls marker feature with controlbar navigation buttons by configuring the css style marker-button to the player container. A list of clickable chapter markers will be generated on the side using the markers navigation feature.

When hovering over a marker if the new time tooltip is enabled this will be replaced with a caption configured for the marker and a thumbnail frame if configured.

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 new player time tooltip 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.

If switching between different video formats and engines which are not Html5 video formats it will use the player cuepoint system 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.

Features

• Enables playlist support to update to new markers and cuepoints.
• Single clip json configuration support.
• Html config support using a text track tag and WebVTT file much like with the subtitles feature.
• WebVTT configurations for json setups supported.
• JSON configurations in WebVTT format to support custom configs like text and thumbnails.
• Generates native Html5 or player specific cuepoints and cuepoint events. This can coincide with other cuepoints like subtitles and handled using the marker property to check for it's existence in events.
• Styleable video markers using css.
• Easy to configure for json and html based 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.
• Enables adding colours and styles for each marker from config options.
• 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.