How can I use highcharts draggable plotline as video timeline (vice versa)

I am frustrated with this. How can I connect these two elements?

Example with random data with draggable plotline and exported value you can find here jsfiddle

$(function () {

function draggablePlotLine(axis, plotLineId) {
    var clickX, clickY;

    var getPlotLine = function () {
        for (var i = 0; i < axis.plotLinesAndBands.length; i++) {
            if (axis.plotLinesAndBands[i].id === plotLineId) {
                return axis.plotLinesAndBands[i];
            }
        }
    };
    
    var getValue = function() {
        var plotLine = getPlotLine();
        var translation = axis.horiz ? plotLine.svgElem.translateX : plotLine.svgElem.translateY;
        var new_value = axis.toValue(translation) - axis.toValue(0) + plotLine.options.value;
        new_value = Math.max(axis.min, Math.min(axis.max, new_value));
        return new_value;
    };

    var drag_start = function (e) {
        $(document).bind({
            'mousemove.line': drag_step,
                'mouseup.line': drag_stop

Thanks for advice!

Solution

I think that something, like is done in the demo below, could be a good start to achieve what you have described.

Demo: https://jsfiddle.net/BlackLabel/s2r0u96p/

// render an empty chart
var chart = Highcharts.chart('container', {

  series: [{
    data: []
  }]
});

I described everything in the comments, so it should be clear what is happening in the code. The next what needs to be done is adding the drag and drop rewinder and change the video value by using: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime. If you will get trouble with that please reproduce your attempt and I will try to help.

API: https://api.highcharts.com/class-reference/Highcharts.Axis#addPlotLine