How to make marker mark any where on progress dynamically
where you want the pointer, just put time in the time: 20.5 and increase the width of the markerStyle: { 'width': '190px' }, so you'll get long line in video progressbar!
here we go
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>you can study here more about all things docs.
if you have any issue please, inform us!
Happy codin'!
One way you can do it is hook into mousedown and mousemove events on seekbar. Add the marker on mousedown with a custom class. Then on mousemove calculate the movement and add the width to the marker element using the custom class.
See this example:
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>