Comment faire pour que le marqueur marque dynamiquement n'importe où sur la progression

9

J'ai un problème avec le marqueur, je veux que le marqueur soit extensible pour marquer n'importe où sur la barre de progression

Comme illustré ci-dessous GIF

Question: Je souhaite sélectionner n'importe quel point de la barre de progression et pouvoir étirer le marqueur, qui peut être plusieurs points de marqueur.

Je ne sais pas comment faire avec le code ci-dessous:

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>
Développer l'extrait

javascript jquery html video.js EaBengaluru
la source
1
stackoverflow.com/questions/26301926/… Vous pouvez examiner cela.
vinayakkyadav
2
ce code ne fonctionne pas, veuillez le produire ici @vinayakkyadav
EaBengaluru
1
Voulez-vous que les marqueurs soient ajoutés par l'utilisateur? Donc, si vous cliquez sur la barre de progression, ils ajoutent un marqueur? Et ils peuvent étirer ce marqueur?
Kalimah
1
@ Kalimah, exactement !!
EaBengaluru

Réponses:

5

Une façon de le faire est de se connecter aux événements mousedownet de mousemoveles rechercher. Ajoutez le marqueur sur mousedown avec une classe personnalisée. Ensuite, sur mousemove, calculez le mouvement et ajoutez la largeur à l'élément marqueur à l'aide de la classe personnalisée.

Voir cet exemple:

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>
Développer l'extrait

Kalimah
la source
veuillez regarder celui-ci, j'ai posté, je pense que cela ne vous prendra pas beaucoup de temps. stackoverflow.com/questions/59123255/…
EaBengaluru
merci pour cette solution, et merci d'avance pour celle-ci stackoverflow.com/questions/59123255/…
EaBengaluru
veuillez voir ma question telle que je l'ai éditée, rendue plus compréhensible, veuillez me la faire savoir par votre commentaire, voici la question: stackoverflow.com/questions/59123255/…
EaBengaluru
8

où vous voulez que le pointeur, il suffit de mettre du temps dans le time: 20.5et d'augmenter la largeur du markerStyle: { 'width': '190px' }, de sorte que vous obtiendrez une longue ligne dans la barre de progression vidéo!

Et c'est parti

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>
Développer l'extrait

vous pouvez étudier ici plus sur tout ce qui concerne les documents .

si vous avez un problème, informez-nous!

Codin heureux!

BloodyLogic
la source
Veuillez lire ma question encore une fois, on me pose des questions sur le marqueur qui peut être marqué n'importe où et peut être étiré et peut en avoir plusieurs. Merci
EaBengaluru
clairement votre solution ne reflète pas ma question, veuillez aider avec ma question
EaBengaluru