Properly containing draggable markers on videojs player

问题

I am working with javascript and videojs and am relatively new to front end development. I'm currently working on a project where I want to allow the user to specify points in a video through the use of draggable markers on the videojs seekbar. I found the videojs marker library from: https://github.com/spchuang/videojs-markers and have made a simple modification in their createMarkers() function to create a draggable marker instead of a permanent marker.

function createMarkers(){
     // create the markers
     var duration, m, pos, text;
     console.log("[videojs-markers] creating markers");
     duration = player.duration();
     $.each(options.marker_breaks, function(key,time){
        pos = (time/duration)*100;
        m = $("<div class='vjs-marker'  id='"+key+"'></div>");
        m.css(setting.markerStyle)
           .css({"margin-left"   : -parseFloat(m.css("width"))/2 +'px',
              "left"          : pos+ '%'});
        //MY ADDITIONS BEGIN
        m.draggable({
            containment: '.vjs-progress-holder'
        });
        m.css({'position':'absolute'});
        //MY ADDITIONS END

        video_wrapper.find('.vjs-progress-control').append(m);
        text = options.marker_text[key] || "";
        markers.push({div: m, time: time, pos:pos, text: text});
     });
  }

However when I try and place a draggable marker on the seek bar it is not really contained in the bar. The markers can be dragged down below the seekbar. If I instead include them in the seekbar for containment they mess with the skipping of the video. Here is the code for inserting the marker:

<!doctype html>
<html>
  <head>
    <script src="C:/linkto/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="C:/linkto/jquery-ui/ui/minified/jquery-ui.custom.min.js"></script>
    <link href="C:/linkto/video-js/video-js.css" rel="stylesheet">
    <script src="C:/linkto/video-js/video.js"></script>
    <script src="C:/linkto/video-js/videojs-markers/videojs.markers.js"></script>
    <link href="C:/linkto/video-js/videojs-markers/videojs.markers.css" rel="stylesheet">
  </head>  
  <body>
    <video id="example_video_1" class="video-js vjs-default-skin" width="640" height="480" controls>
      <source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
      <source type="video/webm" src="http://video-js.zencoder.com/oceans-clip.webm">
    </video>
    <script>    
        var playa = videojs("example_video_1").player()
        playa.markers({
            //set break time
            setting: {
                forceInitialization: true
            },
            marker_breaks:[0, playa.duration()]
        });  
    </script>
  </body>
</html>

I have not edited the css from the videojs-markers code aside from what's above. Any help on how I might be able to contain the marker more accurately would be awesome!

Thanks! ~Zoltana

回答1:

Try using the "axis" property in the draggable setup object.

m.draggable({
    containment: '.vjs-progress-holder',
    axis: 'x'
});

来源：https://stackoverflow.com/questions/26301926/properly-containing-draggable-markers-on-videojs-player

标签

javascript

jquery

jquery-ui

video.js