videojs-breakpoints v1.1.1

Video.js breakpoints

Features

• Display markers on progress bar, with hover-over tooltips
• Display break overlays
• Flexible styling
• Support dynamically adding and removing markers

Quick Start

Add the 'videojs.markers.js' plugin and stylesheet after including videojs script

<link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet">
<link href="videojs.markers.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.2/video.js"></script>
<script src='../src/videojs.markers.js'></script>

Basic usage: display break markers in the video.

To add breaks in the video, simply add a new time (in seconds) in the list of breaks option.

// initialize video.js
var video = videojs('test_video');

//load the marker plugin
video.markers({
  markers: [
     {time: 9.5, text: "this"},
     {time: 16,  text: "is"},
     {time: 23.6,text: "so"},
     {time: 28,  text: "cool"}
  ]
});

Customize marker style:

The style of the markers could be modified by passing an optional setting "markerStyle" with your preference of css styles.

video.markers({
  markerStyle: {
     'width':'8px',
     'background-color': 'red'
  },
  markers: [
     {time: 9.5, text: "this"},
     {time: 16,  text: "is"},
     {time: 23.6,text: "so"},
     {time: 28,  text: "cool"}
  ]    
});

License

This project is licensed under MIT.