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/dist/videojs-markers.js"></script>
  <link href="https://rawgithub.com/spchuang/videojs-markers/master/dist/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>
    
  // initialize video.js
  var video = videojs('#demo_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"}
     ]
  });
  </script>
  
</body>
</html>
 
​
 
​
Output

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

Dismiss x
public
Bin info
spchuangpro
0viewers