진행중인 위치를 마커로 동적으로 표시하는 방법

9

마커에 문제가 있습니다. 진행률 표시 줄의 아무 곳에 나 표시 할 수 있도록 마커를 늘릴 수 있기를 원합니다.

아래 그림과 같이 GIF

질문 : 진행률 표시 줄에서 임의의 지점을 선택하고 마커를 늘릴 수 있기를 원합니다 (여러 마커 지점이 될 수 있음).

아래 코드로 어떻게하는지 모르겠습니다.

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>
스 니펫 확장

javascript  jquery  html  video.js 
— 벵갈 루루
소스
1
— vinayakkyadav
2
해당 코드가 작동하지 않습니다. 여기 @vinayakkyadav를 생성하십시오
— EaBengaluru
1
사용자가 마커를 추가 하시겠습니까? 진행률 표시 줄을 클릭하면 마커가 추가됩니까? 그리고 그들은 그 마커를 늘릴 수 있습니까?
— 칼리마
1
@Kalimah, 정확히 !!
— EaBengaluru

답변:

5

당신이 할 수있는 한 가지 방법 은 탐색 막대에 연결 mousedown하고 mousemove이벤트입니다. 사용자 정의 클래스를 사용하여 마우스 다운에 마커를 추가하십시오. 그런 다음 mousemove에서 이동을 계산하고 사용자 정의 클래스를 사용하여 마커 요소에 너비를 추가하십시오.

이 예를보십시오 :

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>
스 니펫 확장

— 칼리마
소스
이 글을 살펴보십시오. 게시했습니다. 시간이 많이 걸리지 않을 것입니다. stackoverflow.com/questions/59123255/…
— EaBengaluru
이 일을 위해 사전에이 솔루션을 주셔서 감사합니다, 감사 stackoverflow.com/questions/59123255/...
— EaBengaluru
내 참조하시기 바랍니다 질문에 내가 그것을 편집 한대로 더 이해, 내가 당신의 코멘트로 거기에 알려 주시기 바랍니다 만든, 여기 질문은 : stackoverflow.com/questions/59123255/...
— EaBengaluru
8

포인터를 원하는 위치에 시간을 넣고 time: 20.5너비를 늘리면 markerStyle: { 'width': '190px' }비디오 진행률 표시 줄이 길어집니다!

여기 우리는 간다

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>
스 니펫 확장

모든 문서 에 대해 더 많이 공부할 수 있습니다 .

문제가 있으면 알려주십시오!

행복한 코디네!

— 블러디 로직
소스
내 질문을 다시 한 번 읽으십시오. 어디에서나 표시 할 수 있고 늘어날 수 있고 여러 개를 가질 수있는 마커 에 대해 묻습니다 . 감사합니다
— EaBengaluru
명확하게 귀하의 솔루션에 내 질문이 반영되지 않습니다. 내 질문에 도와주세요
— EaBengaluru
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.