在 videogular 中提取实际播放的视频区域（即没有黑条）

Question

有没有办法提取videogular播放器中实际播放的视频区域（例如x,y,width,height）？ "actual playing video"，我指的是黑条之间的部分（在 videogular 容器的宽高比与视频本身不同的情况下）。

谢谢

Answer 1

我是 Videogular 的创建者。

您可以从 API.mediaElement 属性中提取该信息。

我建议您提取有关 onUpdateTime 回调的信息，因为您将在加载视频元数据时收到视频对象尺寸。例如：

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);
};

在 videogular 中提取实际播放的视频区域（即没有黑条）

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

angularjs

html5-video

videogular