Video Markers sketch

by Ea Bangalore

HTML

<script src="http://vjs.zencdn.net/4.2/video.js"></script>
<link rel="stylesheet" href="http://vjs.zencdn.net/4.2/video-js.css">
<link rel="stylesheet" href="https://rawgit.com/spchuang/videojs-markers/master/src/videojs.markers.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/spchuang/videojs-markers/master/dist/videojs.markers.css">
<script src="https://raw.githubusercontent.com/spchuang/videojs-markers/master/dist/videojs-markers.min.js"></script>
<video id="demo" controls class="video-js vjs-default-skin">
   <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
   <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video

JavaScript

var player = videojs('demo');

player.markers({
   markerStyle: {
      'width':'9px',
      'border-radius': '40%',
      'background-color': 'orange'
   },
   markerTip:{
      display: true,
      text: function(marker) {
         return "I am a marker tip: "+ marker.text;
      }
   },
   breakOverlay:{
      display: true,
      displayTime: 4,
      style:{
         'width':'100%',
         'height': '30%',
         'background-color': 'rgba(10,10,10,0.6)',
         'color': 'white',
         'font-size': '16px'
      },
      text: function(marker) {
         return "This is a break overlay: " + marker.overlayText;
      },
   },
   markers: [
      {time: 9.5, text: "this", overlayText: "1", class: "special-blue"},
      {time: 16,  text: "is", overlayText: "2"},
      {time: 23.6,text: "so", overlayText: "3"},
      {time: 28,  text: "cool", overlayText: "4"}
   ]
});