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

Question

当不处于全屏模式时，我可以使用 videoWidth() 和 videoHeight() 获取实际视频（不是播放器）的宽度和大小，如下所示：

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

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

  });

问题是我需要在用户进入全屏模式时检查视频大小，所以我监听了“fullscreenchange”事件并再次检查：

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

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

Answer 1

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

---

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

请注意，fluid-option 是在视频渲染后稍微实现的，所以我不得不使用 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;