在 videogular 中提取实际播放的视频区域(即没有黑条)
Extracting the actual playing video area (i.e without the black bars) in videogular
有没有办法提取videogular播放器中实际播放的视频区域(例如x,y,width,height)?
"actual playing video",我指的是黑条之间的部分(在 videogular 容器的宽高比与视频本身不同的情况下)。
谢谢
我是 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播放器中实际播放的视频区域(例如x,y,width,height)? "actual playing video",我指的是黑条之间的部分(在 videogular 容器的宽高比与视频本身不同的情况下)。
谢谢
我是 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);
};