How to make videojs marker slidable or movable
First, make your markers draggable using jQuery UI's built in method.
$('body').on('mousedown', '.vjs-marker', function(e) {
$(e.target).draggable({
axis: 'x',
containment: '.vjs-progress-control',
});
}).on('mouseup', function(e) {
$('.vjs-marker').css('top','-8px');
});
Since the marker wants to bump up to the top edge of the progress bar, I gave it a top: -8px
on mouseup
.
Then, add the onMarkerClick
method to your player.markers()
call to update the time.
onMarkerClick: function(marker) {
marker.time = player.currentTime();
player.markers.updateTime();
},
And I noticed you were adding a blank marker at 10 seconds, so I replaced that with an empty array.
markers: []
Finally, I added some Prev and Next buttons so you can see that the markers work after sliding.
Edit:
After looking at Ma'moun othman's answer, I realized my solution was missing something. Unlike the range slider example, my markers could cross over one another.
So I used the drag
property of the draggable
object to limit the range of the markers.
...
drag: function( e, ui ) {
if ( $(e.target).index('.vjs-marker') === 0 ) {
const outPosition = parseInt( $('.vjs-slider .vjs-marker:eq(1)').css('left') );
ui.position.left = Math.min( outPosition, ui.position.left );
}
else {
const inPosition = parseInt( $('.vjs-slider .vjs-marker:eq(0)').css('left') );
ui.position.left = Math.max( inPosition, ui.position.left );
}
}
...
var player = videojs('example_video_1');
function markplayer() {
var inTimeOutTimeList = [1.2, 4.2];
var labelList = ['In Point', 'Out Point'];
for (var i = 0; i < inTimeOutTimeList.length; i++) {
player.markers.add([{
time: inTimeOutTimeList[i],
text: labelList[i]
}]);
var icon = (i == 0) ? '[' : ']';
$(".vjs-marker[data-marker-time='" + inTimeOutTimeList[i] + "']").html(icon);
}
};
player.markers({
breakOverlay: {
display: true,
displayTime: 120,
style: {
'width': '100%',
'height': '30%',
'background-color': 'rgba(10,10,10,0.6)',
'color': 'white',
'font-size': '16px'
}
},
onMarkerClick: function(marker, index) {
marker.time = player.currentTime();
player.markers.updateTime();
},
markers: []
});
setTimeout(function() {
markplayer();
}, 2000);
$(function() {
$('body').on('mousedown', '.vjs-marker', function(e) {
$(e.target).draggable({
axis: 'x',
containment: '.vjs-progress-control',
drag: function(e, ui) {
if ($(e.target).index('.vjs-marker') === 0) {
const outPosition = parseInt( $('.vjs-slider .vjs-marker:eq(1)').css('left') );
ui.position.left = Math.min(outPosition, ui.position.left);
} else {
const inPosition = parseInt( $('.vjs-slider .vjs-marker:eq(0)').css('left') );
ui.position.left = Math.max(inPosition, ui.position.left);
}
}
});
}).on('mouseup', function(e) {
$('.vjs-marker').css('top', '-8px');
});
$("#prev").click(function() {
player.markers.prev();
});
$("#next").click(function() {
player.markers.next();
});
});
body {
text-align: center;
}
#example_video_1 {
margin: auto;
}
#buttons {
margin-top: 1em;
}
.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;
}
.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="https://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>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://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" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.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="https://interactive-examples.mdn.mozilla.net/media/examples/flower.mp4" type="video/mp4">
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm" type="video/webm">
</video>
<div id="buttons">
<button id="prev">Previous</button> | <button id="next">Next</button>
</div>
I just added few line to slide
event you had before and I used .values()
from this event to get the start and end value, then did a marker.reset() to add the new markers
...
slide: function twsr(event, ui) {
// $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
player.markers.reset([
{
time: ui.values[0],
text: "this",
overlayText: "1",
class: "special-blue"
},
{
time: ui.values[1],
text: "this",
overlayText: "1",
class: "special-blue"
}
]);
for (var i = 0; i < ui.values.length; i++) {
var icon = i == 0 ? "[" : "]";
$(".vjs-marker[data-marker-time='" + ui.values[i] + "']").html(icon);
}
}
...
Note: I don't feel good about the setTimeOut, and I will check it later oce I have time to revamp it.
And if I got your question right this is the implementation you are looking for, working snippet:
$(document).ready(function() {
var player = videojs("example_video_1");
function markplayer() {
$("#slider-range").slider({
range: true,
min: 0,
max: player.duration(),
values: [6.333, 27.667],
slide: function(event, ui) {
// $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
player.markers.reset([
{
time: ui.values[0],
text: "this",
overlayText: "1",
class: "special-blue"
},
{
time: ui.values[1],
text: "this",
overlayText: "1",
class: "special-blue"
}
]);
for (var i = 0; i < ui.values.length; i++) {
var icon = i == 0 ? "[" : "]";
$(".vjs-marker[data-marker-time='" + ui.values[i] + "']").html(icon);
}
}
});
var inTimeOutTimeList = [6.333, 27.667];
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({
breakOverlay: {
display: true,
displayTime: player.duration(),
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"
}
]
});
setTimeout(function() {
markplayer();
}, 100);
});
.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;
}
.vjs-marker {
background-color: transparent !important;
height: 20px !important;
font-size: 20px !important;
color: red !important;
font-weight: bold;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://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" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<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>
<p><b>I want both of my red markers to be movable/slidable like below slider</b></p>
<div id="slider-range"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://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>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>
</html>
I really liked Ma'moun othman's answer so I decided to tweak it to fit the question's requirements.
I just moved the range slider directly over the progress bar and gave it an opacity: 0;
$(document).ready(function() {
var player = videojs("example_video_1");
function markplayer() {
$("#slider-range").slider({
range: true,
min: 0,
max: player.duration(),
values: [6.333, 27.667],
slide: function(event, ui) {
// $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
player.markers.reset([{
time: ui.values[0],
text: "this",
overlayText: "1",
class: "special-blue"
},
{
time: ui.values[1],
text: "this",
overlayText: "1",
class: "special-blue"
}
]);
for (var i = 0; i < ui.values.length; i++) {
var icon = i == 0 ? "[" : "]";
$(".vjs-marker[data-marker-time='" + ui.values[i] + "']").html(icon);
}
}
});
var inTimeOutTimeList = [6.333, 27.667];
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({
breakOverlay: {
display: true,
displayTime: player.duration(),
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"
}]
});
setTimeout(function() {
$('#slider-range').appendTo('#example_video_1');
markplayer();
}, 100);
});
.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%;
}
#example_video_1 #slider-range {
bottom: 29px;
position: absolute;
width: 100%;
z-index: 101;
opacity: 0;
}
.vjs-default-skin.vjs-has-started .vjs-control-bar {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.vjs-marker {
background-color: transparent !important;
height: 20px !important;
font-size: 20px !important;
color: red !important;
font-weight: bold;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<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>
<div id="slider-range"></div>
<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>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>
</html>