Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head> 
​
<meta charset=utf-8 />
<title>Video.js Markers</title>
  
  <link href="http://vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/4.3/video.js"></script>
  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  
    <!-- include videojs marker src !-->
  <script src="https://rawgithub.com/spchuang/videojs-markers/master/src/videojs.markers.js"></script>
  <link href="https://rawgithub.com/spchuang/videojs-markers/master/src/videojs.markers.css" rel="stylesheet">
  
</head>
<body>
  <h1>Video.js Example Embed</h1>
  <p>Demo for <a href="https://github.com/spchuang/videojs-markers">videojs-markers</a></p>
  
  <video id="demo_video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{ "asdf": true }'>
    <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>
  
  <script>
    //videojs.autoSetup();
    
    // initialize video.js
var video = videojs('demo_video');
​
//load the marker plugin
video.markers({
  //set break time
  marker_breaks:[9.5, 16, 28, 36],
  marker_text  :['text1','text2','text3','text4']
});
    console.log("TEST");
    /*
    videojs('my_video_1').ready(function(){
      console.log(this.options());
    });*/
  </script>
  
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
spchuangpro
0viewers