J'ai un problème avec le marqueur, je veux que le marqueur soit extensible pour marquer n'importe où sur la barre de progression
Comme illustré ci-dessous GIF
Question: Je souhaite sélectionner n'importe quel point de la barre de progression et pouvoir étirer le marqueur, qui peut être plusieurs points de marqueur.
Je ne sais pas comment faire avec le code ci-dessous:
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>