나는 2 개 마커 I, 전자 사이 사이에 선을 그어야 할 '['및 ']'상자.
나는 2 점 I, E를 startTime하고 endTime나는 기능에 의해 그들을 얻을 getRandomStartOrEndTime(), 나는 생각합니다 작은 으로 시간을 startTime하고 더 큰 하나endTime
두 상자가 [됩니다 ]에 의해 그려진 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>두 마커의 차이를 계산하고 그 차이를 세 번째 마커의 너비로 할당하여 작업을 수행했습니다.
또한 이전 버전의 video.js를 사용하고 있으므로 인터페이스가 약간 다르게 보일 수 있습니다.
다음은 그 예입니다.
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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다