在videojs播放器上正確包含可拖動標記

Question

我正在使用javascript和videojs，並且對於前端開發來說還比較陌生。 我目前正在一個項目中，我希望允許用戶通過使用videojs搜尋欄上的可拖動標記來指定視頻中的點。 我從以下網址找到了videojs標記庫： https : //github.com/spchuang/videojs-markers，並對其createMarkers（）函數進行了簡單修改，以創建可拖動標記而不是永久標記。

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});
     });
  }

但是，當我嘗試在搜索欄上放置可拖動標記時，它實際上並沒有包含在搜索欄中。 標記可以向下拖動到搜索欄下方。 如果我改為將它們包含在搜尋欄中以進行遏制，則它們會導致視頻跳過。 這是插入標記的代碼：

<!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>

除了上面的內容之外，我還沒有從videojs-markers代碼中編輯過CSS。 關於如何能夠更准確地包含標記的任何幫助都將非常棒！

謝謝！ 〜Zoltana

Answer 1

嘗試使用可拖動設置對象中的“軸”屬性。

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

在videojs播放器上正確包含可拖動標記

問題描述

1 個解決方案

解決方案1
2 已采納 2014-10-10 16:16:36

在videojs播放器上正確包含可拖動標記

問題描述

1 個解決方案

解決方案1 2 已采納 2014-10-10 16:16:36

解決方案1
2 已采納 2014-10-10 16:16:36