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回调中，宽度和高度没有改变，值与视频未处于全屏模式时的值相同。对于在全屏模式下如何获取实际视频宽度和高度的任何建议，我将不胜感激。 TIA！

Answer 1

由于是全屏，可以通过以下代码获取屏幕的宽高：

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

Answer 2

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

我确实在文档中找到了这个：currentDimensions ... However... I was hoping to get the aspect ratio of the video, - and not the size of the video-element (including the black edges/borders/fillers). I did figure out, that if I set fluid to true ( the fluid option)，那么视频将占据整个视频-HTML-元素。

请注意，流体选项是在视频呈现后稍微实现的，- 所以我不得不使用 setTimeout（uuuuuuugly！），以获得正确的 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';
  },

}

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

Videojs get video dimensions in fullscreen mode

html

javascript

html5-video

video.js