मार्कर को कैसे बनाएं, जहां गतिशील रूप से प्रगति हो

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 
— EaBengaluru
स्रोत
1
stackoverflow.com/questions/26301926/… आप इस पर गौर कर सकते हैं।
— विनायकस्कीवड
2
यह कोड काम नहीं करता है, कृपया यहां @vinayakkyadav
— EaBengaluru
1
क्या आप चाहते हैं कि मार्कर उपयोगकर्ता द्वारा जोड़े जाएं? तो अगर वे प्रगति पट्टी पर क्लिक करते हैं तो वे एक मार्कर जोड़ते हैं? और वे उस मार्कर को खींच सकते हैं?
— कालीमह
1
@ कालीमह, बिल्कुल !!
— EaBengaluru

जवाबों:

5

एक तरह से आप कर सकते हैं यह हुक है mousedownऔर 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>
स्निपेट का विस्तार करें

— Kalimah
स्रोत
कृपया इस पर गौर करें, मैंने पोस्ट किया है, मुझे लगता है कि यह आपके लिए ज्यादा समय नहीं लेगा। stackoverflow.com/questions/59123255/…
— EaBengaluru 6
इस समाधान के लिए धन्यवाद, और अग्रिम में इस एक 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>
स्निपेट का विस्तार करें

आप यहां और सब बातों के बारे में अध्ययन कर सकते हैं डॉक्स ।

यदि आपके पास कोई मुद्दा है, तो कृपया हमें सूचित करें!

हैप्पी कोडिन '!

— BloodyLogic
स्रोत
कृपया मेरे प्रश्न को एक बार फिर से पढ़ें, मैंने मार्कर के बारे में पूछा है जिसे कहीं भी चिह्नित किया जा सकता है और बढ़ाया जा सकता है और इसमें कई हो सकते हैं। धन्यवाद
— EaBengaluru
स्पष्ट रूप से आपका समाधान मेरे प्रश्न को नहीं दर्शाता है, कृपया मेरे प्रश्न के साथ मदद करें
— EaBengaluru
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.