Javascript Videojs在全屏模式下获取视频尺寸

Javascript Videojs在全屏模式下获取视频尺寸,javascript,html,html5-video,video.js,Javascript,Html,Html5 Video,Video.js,在非全屏模式下,我可以使用videoWidth和videoHeight获得实际视频的宽度和大小,而不是播放器,如下所示: var SVideo = videojs('SingularVideo').ready(function(){ resizeFunc(this.videoWidth(), this.videoHeight()) }); 问题是,当用户进入全屏模式时,我需要检查视频大小,因此我会收听全屏更改事件并再次检查: SVideo.on("fullscreenchang

在非全屏模式下,我可以使用videoWidth和videoHeight获得实际视频的宽度和大小,而不是播放器,如下所示:

var SVideo = videojs('SingularVideo').ready(function(){

    resizeFunc(this.videoWidth(), this.videoHeight())

  });
问题是,当用户进入全屏模式时,我需要检查视频大小,因此我会收听全屏更改事件并再次检查:

SVideo.on("fullscreenchange",
      function () {
          resizeFunc(SVideo.videoWidth(), SVideo.videoHeight());
  });
但在fullscreenchange回调中,宽度和高度不会改变,值与视频未处于全屏模式时相同。
我将非常感谢任何关于如何在全屏模式下获得实际视频宽度和高度的建议。蒂亚

由于是全屏显示,您可以使用以下代码获得屏幕的宽度和高度:

var width = screen.width;
var height = screen.height;

我在寻找视频尺寸,但不是全屏模式。我可以看出这是一个老问题-所以你可能还没有这个问题。但希望它能帮助其他人

我确实在文档中找到了这一点:。。。然而我希望得到视频的纵横比,而不是视频元素的大小,包括黑色边缘/边框/填充物。我确实发现,如果我将fluid设置为true,那么视频将占用整个video HTML元素

请注意,流体选项是在视频渲染后稍微实现的,-因此我必须使用setTimeout uu gly!,以获取正确的aspectRatio

以下是我的VueJS代码:

mounted() {
  this.player = videojs(this.$refs.videoPlayer, this.videoOptions, () => {
    this.calcAspectRatio();
    this.setMaxWidth();

    setTimeout( () => {
      this.calcAspectRatio();
      this.setMaxWidth();
    });

    setTimeout( () => {
      this.calcAspectRatio();
      this.setMaxWidth();
    }, 1000 );

    setTimeout( () => {
      this.calcAspectRatio();
      this.setMaxWidth();
    }, 2000 );
  });
}

methods: {
  calcAspectRatio(){
    if( this.player && this.player.currentDimensions( 'width' ).width ){
      this.aspectRatio = this.player.currentDimensions( 'width' ).height / this.player.currentDimensions( 'width' ).width;
    }
  },
  setMaxWidth(){
    let maxWidth = 1 / this.aspectRatio * ( ( this.VIEWPORTHEIGHTWHICHISCALCULATEDELSEWHERE - 100 ) * 0.90 );
    document.querySelector( '#' + this.id ).style.maxWidth = maxWidth + 'px';
  },

}

谢谢你的建议,这永远是实际的视频大小吗?如果长宽比不同,视频是否会拉伸?我需要视频的大小,没有黑色边框。蒂亚!嗯,我不知道。如果您能为代码提供一个JSFIDLE,也许我可以提供更多帮助。这是一个错误的答案。问题是如何获取视频而不是容器尺寸。videoWidth和videoHeight属性返回媒体的宽度和高度,而不是元素的宽度和高度。当你进入全屏时,这些不会神奇地改变。