Controlling Video Seek by Clicking on Area Chart - CanvasJS JavaScript Charts

Controlling Video Seek by Clicking on Area Chart - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="videoContainer" style="height: 300px; width: 100%;" ></div>
<div id="chartContainer" style="height: 80px;"></div>
<p>
Click on Chart to Seek / Move to particular Time
</p>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light2",	
  toolTip: {
    enabled: false
  },
  axisX: {
    minimum: 0,
    title: "Time in Seconds ⟶",
    stripLines: [{}]
  },
  axisY : {
    tickLength: 0,
    gridThickness: 0,
    lineThickness: 0,
    margin: -5,
    labelFormatter: function(e){
      return "";
    }
  },
  data: [{
    type: "area",        
    dataPoints: []
  }]
});

chart.render();

var video = document.createElement('video');
video.style.cssText = "height: 300px;";

var source = document.createElement('source');
source.src = "https://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4";
source.type = "video/mp4";
source.setAttribute("crossorigin", "anonymous");

$(video).append(source);
$("#videoContainer").append(video);
video.play();


video.onloadedmetadata = function(e) {
  var videoRatio = video.videoWidth / video.videoHeight;    
  var width = video.offsetWidth, height = video.offsetHeight;    
  var elementRatio = width/height;
  if(elementRatio > videoRatio) width = height * videoRatio;

  chart.options.width = width;
  chart.options.data[0].dataPoints.push({x: 0, y: 5, indexLabel: "0"});
  chart.options.data[0].dataPoints.push({x: this.duration, y: 10, indexLabel: this.duration.toFixed(0).toString()});
  chart.options.axisX.maximum = this.duration;
  chart.render();
}

video.ontimeupdate = function(e) {
	chart.options.axisX.stripLines[0].value = this.currentTime;
  chart.render();
};

$(chart.container).click(function(e) {
  video.currentTime = chart.axisX[0].convertPixelToValue(e.clientX);
});