如何在video.js中的2个标记之间画线 [英] How to drawline between 2 markers in videojs

问题描述

我想在2个标记之间画一条线，即在'['和']'框之间.

I want to draw line between 2 markers i,e between '[' and ']' boxes.

我有2个点，即startTime和endTime，我通过函数getRandomStartOrEndTime()得到它们，我会认为更短的时间为startTime，更大的时间为endTime

I have 2 points i,e startTime and endTime I get them by function getRandomStartOrEndTime(), i will consider smaller time as startTime and larger one as endTime

两个框[是markplayer()由markplayer()绘制.

这是我尝试过的:

var player = videojs('example_video_1');

function getRandomStartOrEndTime(){
    var x = player.duration()// can be any number
    var rand = Math.floor(Math.random()*x) + 1;
    return rand;
}


function markplayer(){
    player.markers.removeAll();
    var t1 = getRandomStartOrEndTime();
    var t2 = getRandomStartOrEndTime();
    var inTimeOutTimeList = [], index = 0;
    if(t1 < t2) {inTimeOutTimeList.push(t1);index = 1;
    }else{inTimeOutTimeList.push(t2);index = 0;}
    (index == 1) ? inTimeOutTimeList.push(t2) : inTimeOutTimeList.push(t1);
        for(var i = 0; i < inTimeOutTimeList.length; i++){
            player.markers.add([{
            time: inTimeOutTimeList[i],
            text: inTimeOutTimeList[i]
        }]);

        var icon = (i == 0) ? '[' : ']';
        $(".vjs-marker[data-marker-time='"+inTimeOutTimeList[i]+"']").html(icon);
    }
    // lineWidth = (inTimeOutTimeList[1] - inTimeOutTimeList[0])/player.duration()*100 + '%';
    // $('.vjs-marker').css('width',lineWidth);
};

player.markers({
//    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'
      }
   },
   markers: [
      {time:10, startTime:10, endTime:60, text: "this", overlayText: "1", class: "special-blue"},
   ]
});

intervalIntId = setInterval(function(){
    markplayer();
},3000);

.vjs-fluid {
            overflow: hidden;
         }
         #example_video_1 .vjs-control-bar {
            display: block;
         }
         #example_video_1 .vjs-progress-control {
               bottom: 28px;
               left: 0;
               height: 10px;
               width: 100%;
         }
         
    .vjs-default-skin.vjs-has-started .vjs-control-bar {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            /* bottom: -3.4em !important; */
            /* background-color: rgba(7, 20, 30, 1) !important; */
         }

.vjs-marker {
            background-color: transparent !important;
            height: 20px !important;
            font-size: 20px !important;
            color: red !important;
            font-weight: bold;
      }

<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="example_video_1" width="400" height="210" controls class="video-js vjs-default-skin" data-setup='{ "inactivityTimeout": 0 }'>
   <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>

推荐答案

我设法通过计算两个标记之间的差异并将该差异指定为第三个标记的宽度来做到这一点.

I managed to do it by calculating the difference between the two markers and assigning the difference as a width for a third marker.

还请注意，您使用的是旧版本的video.js，这就是界面看起来可能有点不同的原因.

Also note you are using an old version of video.js which is why the interface might look little different.

这里是一个例子:

var player = videojs('example_video_1');

function getRandomStartOrEndTime() {
  var x = player.duration() // can be any number
  var rand = Math.floor(Math.random() * x) + 1;
  return rand;
}


function markplayer() {
  player.markers.removeAll();
  var t1 = getRandomStartOrEndTime();
  var t2 = getRandomStartOrEndTime();
  var inTimeOutTimeList = [],
    index = 0;
  if (t1 < t2) {
    inTimeOutTimeList.push(t1);
    index = 1;
  } else {
    inTimeOutTimeList.push(t2);
    index = 0;
  }
  (index == 1) ? inTimeOutTimeList.push(t2): inTimeOutTimeList.push(t1);
  for (var i = 0; i < inTimeOutTimeList.length; i++) {
    player.markers.add([{
      time: inTimeOutTimeList[i],
      text: inTimeOutTimeList[i]
    }]);

    var icon = (i == 0) ? '[' : ']';
    $(".vjs-marker[data-marker-time='" + inTimeOutTimeList[i] + "']").html(icon);
  }
	
	 player.markers.add([{
    time: inTimeOutTimeList[0],
    text: "I'm new",
    overlayText: "I'm new",
    class: 'range-marker'
  }]);

	//jQuery(".range-marker").width();
	const first = jQuery(".vjs-marker").eq(0).position().left;
	const last = jQuery(".vjs-marker").eq(1).position().left;
	
	const width = last - first;
	jQuery(".range-marker").width(width+"px");

  // lineWidth = (inTimeOutTimeList[1] - inTimeOutTimeList[0])/player.duration()*100 + '%';
  // $('.vjs-marker').css('width',lineWidth);
};

player.markers({
  //    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'
    }
  },
  markers: [{
    time: 10,
    startTime: 10,
    endTime: 60,
    text: "this",
    overlayText: "1",
    class: "special-blue"
  }, ]
});

intervalIntId = setInterval(function() {
  markplayer();
}, 3000);

.vjs-fluid {
  overflow: hidden;
}

#example_video_1 .vjs-control-bar {
  display: block;
}

#example_video_1 .vjs-progress-control {
  bottom: 28px;
  left: 0;
  height: 10px;
  width: 100%;
}

.video-js .vjs-progress-control:hover .vjs-play-progress:after {
  display: none;
}

.vjs-marker {
  background-color: transparent !important;
  height: 20px !important;
  font-size: 20px !important;
  color: red !important;
  font-weight: bold;
}

.vjs-marker.range-marker
{
	background-color: orange !important;
	height: 3px !important;
	margin-left: 0 !important;
}

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.min.js"></script>
<link href="https://vjs.zencdn.net/7.5.5/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="example_video_1" 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>

这篇关于如何在video.js中的2个标记之间画线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！