Làm cách nào để đánh dấu đánh dấu bất kỳ nơi nào đang diễn ra một cách linh hoạt

Tôi có một vấn đề với điểm đánh dấu, tôi muốn điểm đánh dấu có thể kéo dài để đánh dấu bất cứ nơi nào trên thanh tiến trình

Như được hiển thị trong GIF dưới đây

Câu hỏi: Tôi muốn chọn bất kỳ điểm nào trên thanh tiến trình và có thể kéo dài điểm đánh dấu, có thể là nhiều điểm đánh dấu.

Tôi không biết làm thế nào với mã dưới đây:

var player = videojs('demo');

player.markers({
   markerStyle: {
      'width':'9px',
      'border-radius': '40%',
      'background-color': 'orange'
   },
   markerTip:{
      display: true,
      text: function(marker) {
         return "I am a marker tip: "+ marker.text;
      }
   },
   breakOverlay:{
      display: true,
      displayTime: 4,
      style:{
         'width':'100%',
         'height': '30%',
         'background-color': 'rgba(10,10,10,0.6)',
         'color': 'white',
         'font-size': '16px'
      },
      text: function(marker) {
         return "This is a break overlay: " + marker.overlayText;
      },
   },
   markers: [
      {time: 9.5, text: "this", overlayText: "1", class: "special-blue"},
      {time: 16,  text: "is", overlayText: "2"},
      {time: 23.6,text: "so", overlayText: "3"},
      {time: 28,  text: "cool", overlayText: "4"}
   ]
});

<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>
<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"/>
<video id="demo" width="400" height="210" controls class="video-js vjs-default-skin">
   <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>

Mở rộng đoạn trích

— EaBengaluru
nguồn

stackoverflow.com/questions/26301926/ khăn Bạn có thể xem xét điều này.

— vinayakkyadav

mã đó không hoạt động, vui lòng sản xuất tại đây @vinayakkyadav

— EaBengaluru

Bạn có muốn đánh dấu được thêm bởi người dùng? Vì vậy, nếu nhấp vào thanh tiến trình họ thêm một điểm đánh dấu? Và họ có thể kéo dài điểm đánh dấu?

— Kalimah

@Kalimah, chính xác !!

— EaBengaluru

Câu trả lời:

Một cách bạn có thể làm là nối vào mousedownvà mousemovecác sự kiện trên nút tìm kiếm. Thêm điểm đánh dấu vào mousedown với một lớp tùy chỉnh. Sau đó, trên mousemove tính toán chuyển động và thêm chiều rộng cho phần tử đánh dấu bằng lớp tùy chỉnh.

Xem ví dụ này:

var player = videojs('demo');

// Set variable so we can add values later
let lastAddedMarker = null;
let moving = false;
let seekBar = player.controlBar.progressControl.seekBar;
let startPoint = 0;

// When seekbar is clicked add marker and set values to startpoint and set moving flag to true
seekBar.on('mousedown', function(event) {
  var seekBarEl = this.el();
  startPoint = videojs.dom.getPointerPosition(seekBarEl, event).x;

  player.markers.add([{
    time: player.currentTime(),
    text: "I'm new",
    overlayText: "I'm new",
    class: 'custom-marker'
  }]);

  lastAddedMarker = jQuery(".custom-marker");
  moving = true;
});

// When user moves while on seekbar get the width and set it to 'custom-marker' class
seekBar.on("mousemove", function(e) {
  if (moving) {
    let seekBarEl = this.el();
    let movingPoint = videojs.dom.getPointerPosition(seekBarEl, event).x;
    let containerWidth = jQuery(seekBarEl).width();
    let markerWidth = containerWidth * (movingPoint - startPoint);
    lastAddedMarker.width(markerWidth + "px");
  }
});

jQuery(document).on("mouseup", function() {
  moving = false;
});

player.markers({
  markerStyle: {
    'width': '9px',
    'border-radius': '2px',
    'background-color': 'orange'
  },
  markerTip: {
    display: true,
    text: function(marker) {
      return "I am a marker tip: " + marker.text;
    }
  },
  onMarkerClick: function(marker) {
    console.log("AS");
  },
  breakOverlay: {
    display: true,
    displayTime: 4,
    style: {
      'width': '100%',
      'height': '30%',
      'background-color': 'rgba(10,10,10,0.6)',
      'color': 'white',
      'font-size': '16px'
    },
    text: function(marker) {
      return "This is a break overlay: " + marker.overlayText;
    },
  },
  markers: []
});

.vjs-marker {
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 1;
  height: 100%;
  transition: opacity .2s ease;
  -webkit-transition: opacity .2s ease;
  -moz-transition: opacity .2s ease;
  z-index: 100
}

.vjs-break-overlay,
.vjs-tip {
  visibility: hidden;
  position: absolute;
  z-index: 100000
}

.vjs-marker:hover {
  cursor: pointer;
  -webkit-transform: scale(1.3, 1.3);
  -moz-transform: scale(1.3, 1.3);
  -o-transform: scale(1.3, 1.3);
  -ms-transform: scale(1.3, 1.3);
  transform: scale(1.3, 1.3)
}

.vjs-tip {
  display: block;
  opacity: .8;
  padding: 5px;
  font-size: 10px;
  bottom: 14px
}

.vjs-tip .vjs-tip-arrow {
  background: url(data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==) bottom left no-repeat;
  bottom: 0;
  left: 50%;
  margin-left: -4px;
  position: absolute;
  width: 9px;
  height: 5px
}

.vjs-tip .vjs-tip-inner {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  padding: 5px 8px 4px;
  background-color: #000;
  color: #fff;
  max-width: 200px;
  text-align: center
}

.vjs-break-overlay {
  top: 0
}

.vjs-break-overlay .vjs-break-overlay-text {
  padding: 9px;
  text-align: center
}

<link href="https://vjs.zencdn.net/7.5.5/video-js.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.5/video.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs.markers.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.min.js"></script>
<video id="demo" width="400" height="210" controls class="video-js vjs-default-skin">
  <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>

Mở rộng đoạn trích

— Kalimah
nguồn

xin vui lòng xem cái này, tôi đã đăng, tôi nghĩ nó sẽ không mất nhiều thời gian cho bạn. stackoverflow.com/questions/59123255/

— Mạnh

cảm ơn về giải pháp này và cảm ơn trước về một stackoverflow.com/questions/59123255/iêu

— EaBengaluru

vui lòng xem câu hỏi của tôi vì tôi đã chỉnh sửa nó, làm cho nó dễ hiểu hơn, xin vui lòng cho tôi biết ở đó bằng nhận xét của bạn, đây là câu hỏi: stackoverflow.com/questions/59123255/

— Lỗi

nơi bạn muốn con trỏ, chỉ cần đặt thời gian vào time: 20.5và tăng chiều rộng của markerStyle: { 'width': '190px' }, vì vậy bạn sẽ nhận được hàng dài trên thanh tiến trình video!

chúng ta đi đây

var player = videojs('demo');

player.markers({
   markerStyle: {
      'width':'190px',
      'border-radius': '2px',
      'background-color': 'orange'
   },
   markerTip:{
      display: true,
      text: function(marker) {
         return "I am a marker tip: "+ marker.text;
      }
   },
   breakOverlay:{
      display: true,
      displayTime: 120,
      style:{
         'width':'100%',
         'height': '30%',
         'background-color': 'rgba(10,10,10,0.6)',
         'color': 'white',
         'font-size': '16px'
      },
      text: function(marker) {
         return "This is a break overlay: " + marker.overlayText;
      },
   },
   markers: [
      {time: 20.5, text: "this", overlayText: "1", class: "special-blue"},
   ]
});

<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>
<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"/>
<video id="demo" width="400" height="210" controls class="video-js vjs-default-skin">
   <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>

Mở rộng đoạn trích

bạn có thể nghiên cứu ở đây nhiều hơn về tất cả mọi thứ tài liệu .

Nếu bạn có bất kỳ vấn đề xin vui lòng, thông báo cho chúng tôi!

Chúc mừng mã hóa!

— BloodyLogic
nguồn

Vui lòng đọc câu hỏi của tôi một lần nữa, tôi được hỏi về Marker có thể được đánh dấu ở bất cứ đâu và có thể được kéo dài và có thể có nhiều cái. Cảm ơn

— EaBengaluru

rõ ràng giải pháp của bạn không phản ánh câu hỏi của tôi, vui lòng giúp đỡ với Câu hỏi của tôi

— EaBengaluru