I have a problem with marker, I want the marker to be stretchable to mark anywhere on the progress bar
As shown in below GIF
Question: I want to select any point on the progress bar and be able to stretch the marker, which can be multiple marker points.
I don't know how to do it with below code:
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>