গতিশীলভাবে অগ্রগতিতে যেখানে চিহ্নিতকারীকে কীভাবে চিহ্নিত করা যায়

9

মার্কার নিয়ে আমার সমস্যা আছে, আমি চাই যে অগ্রগতি বারে চিহ্নিতকারীটি যে কোনও জায়গায় চিহ্নিত করতে প্রসারিত হোক

জিআইএফের নীচে দেখানো হয়েছে

প্রশ্ন: আমি অগ্রগতি বারের যে কোনও পয়েন্ট নির্বাচন করতে এবং চিহ্নিতকারীকে প্রসারিত করতে সক্ষম হতে চাই, যা একাধিক মার্কার পয়েন্ট হতে পারে।

নীচের কোড দিয়ে এটি কীভাবে করব তা আমি জানি না:

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
এই কোডটি কাজ করে না, অনুগ্রহ করে এখানে @Venayakkyadav উত্পাদন করুন
— ইবাবেঙ্গালুরু
1
আপনি কি ব্যবহারকারী দ্বারা চিহ্নিতকারী যুক্ত করা চান? সুতরাং যদি তারা অগ্রগতি বারে ক্লিক করে তারা একটি মার্কার যুক্ত করে? এবং তারা যে চিহ্নিত করা প্রসারিত করতে পারেন?
— কালেমা
1
@ কালিমা, হুবহু !!
— ইবাবেঙ্গালুরু

উত্তর:

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>
স্নিপেট প্রসারিত করুন

— কালেমা
সূত্র
দয়া করে এটি দেখুন, আমি পোস্ট করেছি, আমার মনে হয় এটি আপনার পক্ষে বেশি সময় নিবে না। 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>
স্নিপেট প্রসারিত করুন

আপনি এখানে সমস্ত জিনিস ডক্স সম্পর্কে আরও অধ্যয়ন করতে পারেন ।

আপনার যদি কোন সমস্যা থাকে তবে আমাদের জানান!

শুভ চোদন '!

— BloodyLogic
সূত্র
দয়া করে আমার প্রশ্নটি আবার পড়ুন, আমাকে মার্কার সম্পর্কে জিজ্ঞাসা করা হয়েছে যা যে কোনও জায়গায় চিহ্নিত করা যেতে পারে এবং প্রসারিত হতে পারে এবং একাধিক প্রশ্ন থাকতে পারে। ধন্যবাদ
— ইবাঙ্গালুরু
স্পষ্টত আপনার সমাধানটি আমার প্রশ্নের প্রতিফলন করে না, দয়া করে আমার প্রশ্নের সাথে সহায়তা করুন
— ইবাবেঙ্গালুরু
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.