Extracting the actual playing video area (i.e without the black bars) in videogular

Question

Is there a way to extract the actual playing video area (e.g x,y,width,height) inside the videogular player? by "actual playing video", i mean the part between the black bars (in cases when the videogular container has different aspect ratio than the video itself).

Thanks

Answer 1

I'm the creator of Videogular.

You can extract that information from the API.mediaElement property.

I recommend you to extract the info on the onUpdateTime callback, since you will receive the video object dimensions when the video metadata is loaded. For example:

this.onUpdateTime = function (currentTime, totalTime) {
  this.currentTime = currentTime;
  this.totalTime = totalTime;

  var containerWidth = this.API.mediaElement[0].offsetWidth;
  var containerHeight = this.API.mediaElement[0].offsetHeight;
  var videoWidth = this.API.mediaElement[0].videoWidth;
  var videoHeight = this.API.mediaElement[0].videoHeight;
  console.log(containerWidth);
  console.log(containerHeight);
  console.log(videoWidth);
  console.log(videoHeight);

  var calcVideoHeight = videoHeight * containerWidth / videoWidth;
  var videoY = (containerHeight - calcVideoHeight) / 2;

  console.log(calcVideoHeight);
  console.log(videoY);

  console.log("actual playing area");
  console.log("x: " + this.API.mediaElement[0].offsetLeft + 
              " | y: " + videoY + 
              " | videoWidth: " + containerWidth + 
              " | videoHeight: " + calcVideoHeight);
};