Question

我能够获得宽度和宽度。使用videoWidth（）和videoHeight（）时不使用全屏模式的实际视频（不是播放器）的大小，如下所示：

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

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

  });

问题是我需要在用户进入全屏模式时检查视频大小，因此我会在＆＃34; fullscreenchange＆＃34;事件并再次检查：

SVideo.on("fullscreenchange",
      function () {
          resizeFunc(SVideo.videoWidth(), SVideo.videoHeight());
  });

但是在fullscreenchange回调中，宽度和高度不会改变，这些值与视频未处于全屏模式时的值相同。我非常感谢有关如何在全屏模式下获得实际视频宽度和高度的任何建议。 TIA！

Answer 1

我一直在寻找视频尺寸，但不是在全屏模式下。我可以看到这是一个古老的问题，所以您可能仍然没有这个问题。但希望它可以帮助其他人。

我确实在文档中找到了这一点：the fluid option ...但是...我希望获得视频的长宽比，而不是视频元素的尺寸（包括黑色边缘） /边界/填充物）。我确实发现，如果将fluid设置为true（DbContext.SaveChanges），那么视频将占据整个视频HTML元素。

请注意，在渲染视频后不久就实现了fluid选项，因此，我必须使用setTimeout（uuuuuugly！）来获得正确的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';
  },

}

Answer 2

由于全屏显示，您可以使用以下代码获取屏幕的宽度和高度：

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

Videojs以全屏模式获取视频尺寸

2 个答案: