Como fazer marcadores marcar em qualquer lugar do progresso dinamicamente

9

Estou com um problema com o marcador, quero que ele seja esticável para marcar em qualquer lugar da barra de progresso

Como mostrado abaixo GIF

Pergunta: Desejo selecionar qualquer ponto na barra de progresso e poder esticar o marcador, que pode ser vários pontos do marcador.

Não sei como fazê-lo com o código abaixo:

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>
Expandir snippet

javascript jquery html video.js EaBengaluru
fonte
11
stackoverflow.com/questions/26301926/… Você pode analisar isso.
vinayakkyadav
2
que código não funciona, por favor produzir aqui @vinayakkyadav
EaBengaluru
11
Deseja que os marcadores sejam adicionados pelo usuário? Então, se clicar na barra de progresso, eles adicionam um marcador? E eles podem esticar esse marcador?
Kalimah 26/11/19
11
@ Kalimah, exatamente !!
EaBengaluru

Respostas:

5

Uma maneira que você pode fazê-lo é gancho para mousedowne mousemoveeventos seekbar. Adicione o marcador na ratoeira com uma classe personalizada. Em seguida, mousemove calcule o movimento e adicione a largura ao elemento marcador usando a classe personalizada.

Veja este exemplo:

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>
Expandir snippet

Kalimah
fonte
por favor, olhe para este, eu postei, acho que não vai demorar muito tempo para você. stackoverflow.com/questions/59123255/…
EaBengaluru
obrigado por esta solução, e obrigado antecipadamente para este stackoverflow.com/questions/59123255/...
EaBengaluru
por favor, veja minha pergunta como a editei, a tornei mais compreensível, por favor, deixe-me saber lá pelo seu comentário, aqui está a pergunta: stackoverflow.com/questions/59123255/…
EaBengaluru
8

onde você deseja o ponteiro, basta colocar o tempo no time: 20.5e aumentar a largura do markerStyle: { 'width': '190px' }, para obter uma linha longa na barra de progresso do vídeo!

aqui vamos nós

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>
Expandir snippet

você pode estudar aqui mais sobre todos os documentos .

se você tiver qualquer problema, por favor, informe-nos!

Feliz codin '!

BloodyLogic
fonte
Por favor, leia minha pergunta mais uma vez, perguntam-me sobre o Marcador que pode ser marcado em qualquer lugar e pode ser esticado e pode ter vários. Obrigado
EaBengaluru 25/11/19
claramente a sua solução não reflete a minha pergunta, por favor, ajuda com a minha pergunta
EaBengaluru