如何使videojs标记可滑动或可移动答案

【问题标题】：How to make videojs marker slidable or movable如何使videojs标记可滑动或可移动
【发布时间】：2020-02-21 11:32:30
【问题描述】：

我想在我的markers 与搜索一起滑动时移动它。我希望我的标记完全是 slidable 作为 jqueryui-slider

问题：我希望我的markers(both) 与jqueryui-range 滑块一样可滑动，如下例中的视频所示：

var player = videojs('example_video_1');

function markplayer(){
var inTimeOutTimeList = [6.333,27.667];
        for(var i = 0; i < inTimeOutTimeList.length; i++){
            player.markers.add([{
            time: inTimeOutTimeList[i],
            text: inTimeOutTimeList[i]
        }]);

        var icon = (i == 0) ? '[' : ']';
        $(".vjs-marker[data-marker-time='"+inTimeOutTimeList[i]+"']").html(icon);
    }
};

player.markers({
   breakOverlay:{
      display: true,
      displayTime: 120,
      style:{
         'width':'100%',
         'height': '30%',
         'background-color': 'rgba(10,10,10,0.6)',
         'color': 'white',
         'font-size': '16px'
      }
   },
   markers: [
      {time:10, startTime:10, endTime:60, text: "this", overlayText: "1", class: "special-blue"},
   ]
});

setTimeout(function(){
 markplayer();    
},2000);

 $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });

.vjs-fluid {
            overflow: hidden;
         }
         #example_video_1 .vjs-control-bar {
            display: block;
         }
         #example_video_1 .vjs-progress-control {
               bottom: 28px;
               left: 0;
               height: 10px;
               width: 100%;
         }
         
    .vjs-default-skin.vjs-has-started .vjs-control-bar {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
         }

.vjs-marker {
            background-color: transparent !important;
            height: 20px !important;
            font-size: 20px !important;
            color: red !important;
            font-weight: bold;
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://vjs.zencdn.net/4.2/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs.markers.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>



<video id="example_video_1" width="400" height="210" controls class="video-js vjs-default-skin" data-setup='{ "inactivityTimeout": 0 }'>
   <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>


<p><b>I want both of my red markers to be movable/slidable like below slider</b></p>


<div id="slider-range"></div>

请帮助我提前谢谢！！！

【问题讨论】：

标签： javascript jquery video video.js

【解决方案1】：

首先，使用 jQuery UI 的内置方法使您的标记可拖动。

$('body').on('mousedown', '.vjs-marker', function(e) {
    $(e.target).draggable({
      axis: 'x',
      containment: '.vjs-progress-control',
    });
}).on('mouseup', function(e) {
    $('.vjs-marker').css('top','-8px');   
});

由于标记想要碰到进度条的顶部边缘，我在mouseup 上给它一个top: -8px。

然后，将onMarkerClick 方法添加到您的player.markers() 调用中以更新时间。

onMarkerClick: function(marker) {    
    marker.time = player.currentTime();
    player.markers.updateTime();
},

我注意到您在 10 秒时添加了一个空白标记，因此我将其替换为一个空数组。

markers: []

最后，我添加了一些 Prev 和 Next 按钮，这样您就可以看到标记在滑动后起作用。

编辑：

查看Ma'moun othman's answer 后，我意识到我的解决方案缺少一些东西。与范围滑块示例不同，我的标记可以相互交叉。

所以我使用draggable 对象的drag 属性来限制标记的范围。

...    
drag: function( e, ui ) {        
  if ( $(e.target).index('.vjs-marker') === 0 ) {
    const outPosition = parseInt( $('.vjs-slider .vjs-marker:eq(1)').css('left') );          
    ui.position.left = Math.min( outPosition, ui.position.left );
  }
  else {
    const inPosition = parseInt( $('.vjs-slider .vjs-marker:eq(0)').css('left') );
    ui.position.left = Math.max( inPosition, ui.position.left );        
  }                
}
...

var player = videojs('example_video_1');

function markplayer() {
  var inTimeOutTimeList = [1.2, 4.2];
  var labelList = ['In Point', 'Out Point'];
  for (var i = 0; i < inTimeOutTimeList.length; i++) {
    player.markers.add([{
      time: inTimeOutTimeList[i],
      text: labelList[i]
    }]);

    var icon = (i == 0) ? '[' : ']';
    $(".vjs-marker[data-marker-time='" + inTimeOutTimeList[i] + "']").html(icon);
  }
};

player.markers({
  breakOverlay: {
    display: true,
    displayTime: 120,
    style: {
      'width': '100%',
      'height': '30%',
      'background-color': 'rgba(10,10,10,0.6)',
      'color': 'white',
      'font-size': '16px'
    }
  },
  onMarkerClick: function(marker, index) {
    marker.time = player.currentTime();
    player.markers.updateTime();
  },
  markers: []
});

setTimeout(function() {
  markplayer();
}, 2000);

$(function() {
  $('body').on('mousedown', '.vjs-marker', function(e) {
    $(e.target).draggable({
      axis: 'x',
      containment: '.vjs-progress-control',
      drag: function(e, ui) {
        if ($(e.target).index('.vjs-marker') === 0) {
          const outPosition = parseInt( $('.vjs-slider .vjs-marker:eq(1)').css('left') );
          ui.position.left = Math.min(outPosition, ui.position.left);
        } else {
          const inPosition = parseInt( $('.vjs-slider .vjs-marker:eq(0)').css('left') );
          ui.position.left = Math.max(inPosition, ui.position.left);
        }
      }
    });
  }).on('mouseup', function(e) {
    $('.vjs-marker').css('top', '-8px');
  });

  $("#prev").click(function() {
    player.markers.prev();
  });
  $("#next").click(function() {
    player.markers.next();
  });
});

body {
  text-align: center;
}

#example_video_1 {
  margin: auto;
}

#buttons {
  margin-top: 1em;
}

.vjs-fluid {
  overflow: hidden;
}

#example_video_1 .vjs-control-bar {
  display: block;
}

#example_video_1 .vjs-progress-control {
  bottom: 28px;
  left: 0;
  height: 10px;
  width: 100%;
}

.vjs-default-skin.vjs-has-started .vjs-control-bar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.vjs-marker {
  background-color: transparent !important;
  height: 20px !important;
  font-size: 20px !important;
  color: red !important;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://vjs.zencdn.net/4.2/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs.markers.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />

<video id="example_video_1" width="400" height="210" controls class="video-js vjs-default-skin" data-setup='{ "inactivityTimeout": 0 }'>
	   <source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.mp4" type="video/mp4">
	   <source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm" type="video/webm">
	</video>

<div id="buttons">
  <button id="prev">Previous</button> | <button id="next">Next</button>
</div>

【讨论】：

【解决方案2】：

我刚刚在您之前的@987654322@ 事件中添加了几行，我使用此事件中的.values() 来获取开始和结束值，然后使用marker.reset() 添加新标记

...
slide: function twsr(event, ui) {
  // $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
  player.markers.reset([
    {
      time: ui.values[0],
      text: "this",
      overlayText: "1",
      class: "special-blue"
    },
    {
      time: ui.values[1],
      text: "this",
      overlayText: "1",
      class: "special-blue"
    }
  ]);
  for (var i = 0; i < ui.values.length; i++) {
    var icon = i == 0 ? "[" : "]";
    $(".vjs-marker[data-marker-time='" + ui.values[i] + "']").html(icon);
  }
}
...

注意：我对 setTimeOut 感觉不太好，等我有时间修改它时会检查它。

如果我的问题是正确的，这就是您正在寻找的实现，工作 sn-p：

$(document).ready(function() {
  var player = videojs("example_video_1");

  function markplayer() {
    $("#slider-range").slider({
      range: true,
      min: 0,
      max: player.duration(),
      values: [6.333, 27.667],
      slide: function(event, ui) {
        // $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        player.markers.reset([
          {
            time: ui.values[0],
            text: "this",
            overlayText: "1",
            class: "special-blue"
          },
          {
            time: ui.values[1],
            text: "this",
            overlayText: "1",
            class: "special-blue"
          }
        ]);
        for (var i = 0; i < ui.values.length; i++) {
          var icon = i == 0 ? "[" : "]";
          $(".vjs-marker[data-marker-time='" + ui.values[i] + "']").html(icon);
        }
      }
    });

    var inTimeOutTimeList = [6.333, 27.667];
    for (var i = 0; i < inTimeOutTimeList.length; i++) {
      player.markers.add([
        {
          time: inTimeOutTimeList[i],
          text: inTimeOutTimeList[i]
        }
      ]);

      var icon = i == 0 ? "[" : "]";
      $(".vjs-marker[data-marker-time='" + inTimeOutTimeList[i] + "']").html(
        icon
      );
    }
  }

  player.markers({
    breakOverlay: {
      display: true,
      displayTime: player.duration(),
      style: {
        width: "100%",
        height: "30%",
        "background-color": "rgba(10,10,10,0.6)",
        color: "white",
        "font-size": "16px"
      }
    },
    markers: [
      {
        time: 10,
        startTime: 10,
        endTime: 60,
        text: "this",
        overlayText: "1",
        class: "special-blue"
      }
    ]
  });

  setTimeout(function() {
    markplayer();
  }, 100);
});

.vjs-fluid {
  overflow: hidden;
}
#example_video_1 .vjs-control-bar {
  display: block;
}
#example_video_1 .vjs-progress-control {
  bottom: 28px;
  left: 0;
  height: 10px;
  width: 100%;
}

.vjs-default-skin.vjs-has-started .vjs-control-bar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.vjs-marker {
  background-color: transparent !important;
  height: 20px !important;
  font-size: 20px !important;
  color: red !important;
  font-weight: bold;
}

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs.markers.min.css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
    <style>

    </style>

</head>

<body>
    <video id="example_video_1" width="400" height="210" controls class="video-js vjs-default-skin" data-setup='{ "inactivityTimeout": 0 }'>
        <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>

    <p><b>I want both of my red markers to be movable/slidable like below slider</b></p>

    <div id="slider-range"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://vjs.zencdn.net/4.2/video.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</body>

</html>

【讨论】：

这个答案不符合 OP 的问题：我希望我的标记可以像 jqueryui-slider 一样完全滑动。标记不会在 sn-p 中滑动。
感谢您的澄清！我已经计划在这里改进我的解决方案，但我相信@thingEvery 做对了！所以我会为他+1。
谢谢。我也喜欢你的解决方案。事实上，在看了之后，我更新了我的答案，并根据你的答案添加了另一个。
@thingEvery，看来我的问题没答对，谢谢你的支持:)
@Ma'mounothman，我真的很喜欢你的解决方案，即使我喜欢 thingEvery 解决方案

【解决方案3】：

我真的很喜欢Ma'moun othman's answer，所以我决定对其进行调整以适应问题的要求。

我只是将范围滑块直接移到进度条上并给它一个opacity: 0;

$(document).ready(function() {
  var player = videojs("example_video_1");

  function markplayer() {
    $("#slider-range").slider({
      range: true,
      min: 0,
      max: player.duration(),
      values: [6.333, 27.667],
      slide: function(event, ui) {
        // $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        player.markers.reset([{
            time: ui.values[0],
            text: "this",
            overlayText: "1",
            class: "special-blue"
          },
          {
            time: ui.values[1],
            text: "this",
            overlayText: "1",
            class: "special-blue"
          }
        ]);
        for (var i = 0; i < ui.values.length; i++) {
          var icon = i == 0 ? "[" : "]";
          $(".vjs-marker[data-marker-time='" + ui.values[i] + "']").html(icon);
        }
      }
    });

    var inTimeOutTimeList = [6.333, 27.667];
    for (var i = 0; i < inTimeOutTimeList.length; i++) {
      player.markers.add([{
        time: inTimeOutTimeList[i],
        text: inTimeOutTimeList[i]
      }]);

      var icon = i == 0 ? "[" : "]";
      $(".vjs-marker[data-marker-time='" + inTimeOutTimeList[i] + "']").html(
        icon
      );
    }
  }

  player.markers({
    breakOverlay: {
      display: true,
      displayTime: player.duration(),
      style: {
        width: "100%",
        height: "30%",
        "background-color": "rgba(10,10,10,0.6)",
        color: "white",
        "font-size": "16px"
      }
    },
    markers: [{
      time: 10,
      startTime: 10,
      endTime: 60,
      text: "this",
      overlayText: "1",
      class: "special-blue"
    }]
  });

  setTimeout(function() {
    $('#slider-range').appendTo('#example_video_1');
    markplayer();
  }, 100);
});

.vjs-fluid {
  overflow: hidden;
}

#example_video_1 .vjs-control-bar {
  display: block;
}

#example_video_1 .vjs-progress-control {
  bottom: 28px;
  left: 0;
  height: 10px;
  width: 100%;
}

#example_video_1 #slider-range {
  bottom: 29px;
  position: absolute;
  width: 100%;
  z-index: 101;
  opacity: 0;
}

.vjs-default-skin.vjs-has-started .vjs-control-bar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.vjs-marker {
  background-color: transparent !important;
  height: 20px !important;
  font-size: 20px !important;
  color: red !important;
  font-weight: bold;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs.markers.min.css" rel="stylesheet" />

  <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
  <style>

  </style>

</head>

<body>
  <video id="example_video_1" width="400" height="210" controls class="video-js vjs-default-skin" data-setup='{ "inactivityTimeout": 0 }'>
        <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>


  <div id="slider-range"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="http://vjs.zencdn.net/4.2/video.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</body>

</html>

【讨论】：