javascript - 调整视频JS大小，容器调整大小，但实际视频仍然原始大小

Question

我正在 window.resize 上调整我的 videojs 播放器的大小

黑色“视频容器”(如果您愿意的话)会调整大小，但实际视频保持相同的大小。现在，它会在容器内收缩(调整大小)，或与容器重叠(调整大小)。

页面重新加载会重建播放器并在新的范围内播放。

如何告诉它重新初始化新的大小，而不重新加载页面。

让这个特别有趣的是，它似乎在我的本地主机(开发网络服务器)上运行时可以工作。在在线托管上运行它会出现上述问题。

function redrawVideoPlayer() {

    var newHeight
    var newWidth
    newWidth = $(window).width() * 0.33;
    newHeight = newWidth * 0.75;

    $('#ytvidplayer').css('height', newHeight);

    $('#ytvidplayer').css('width', newWidth);

    //set related video div height eual to video height

    $('#related_vids_scroller').css('height', newHeight);

    var myVideo = videojs('ytvidplayer');
    myVideo.width(newWidth).height(newHeight);
    myVideo.load();
    myVideo.play();
}

Answer 1

我认为这是一种很酷的方法，即使在调整事件大小后也能保持视频的宽高比。让我们来分解一下:

1. 您需要一个调整大小函数，该函数接受视频的已知宽高比(在我的代码中，它是将“dimensionsize”参数作为字符串传递给 resizeVideoJS() 函数，如下所示:“1920x760”。另一个参数是初始化的 videoJS 视频对象“video”和浏览器窗口对象“win”。)我传入参数是因为我的代码分为两个模块，一个模块处理操作和辅助函数 - 例如 resizeVideo 或togglePoster 等. - 另一个是初始化事件并将事件绑定(bind)到视频对象的小部件。 resizeVideoJS() 函数在 actions 模块中定义并在小部件中调用。

所以这是代码:

function resizeVideoJS( video, win, dimensionSize ) {

    var width,
	aspectRatio;

    video.pause();
    aspectRatio = _calculateAspectratio( dimensionSize );
    width = video.width() <= 0 ? win.innerWidth : video.width();
    video.height( width * aspectRatio );
}

function _calculateAspectratio( videoDimensionsStr ) {
	
    var parts;
    parts = videoDimensionsStr.split( 'x' );
    return parts[ 1 ] / parts[ 0 ];
}

接下来，我只需在小部件中创建一个 _resizeCallbackHelper() 函数，用于检查调整大小事件并在它们发生时触发(尽管我也使用了 Lodash 的throttle 函数，因为调整大小事件可以快速触发)。

function _resizeCallbackHelper( ) {

  if ( config[ screensize ].dimensions && win.innerWidth !== screen.windowWidth ) {
    videoPoster ? dom.hide( videoPoster ) : false;
    screen = videoAction.setScreenSizeInfoVariables( win );
    _setVideoDimensions();
    videoAction.resizeVideoJS( video, win, dimensionSize );
    config[ screensize ].poster ? _setVideoPoster() : false;
  }
}

关于上面 _resizeCallbackHelper() 函数的一点解释:

config[screensize] 是我从 html 视频标签内的 data-settings=""创建的配置对象。它具有视频的所有设置，例如 video.muted() 甚至 video.dimensions。我将其作为嵌套对象的对象，使其看起来像 { Desktop: {Dimensions: '1920x760', muted: true }, Mobile : {dimension: '760x320', muted: false } }。但你可以随心所欲地做。我喜欢这个，因为它允许跨不同设备进行自定义设置。我使用下面的 _setVideoDimensions() 函数定义尺寸和屏幕大小，其中 screen 是一个带有 bool 值的对象，告诉视频正在加载哪种屏幕类型。如您所见，config[screensize] 变为 config['MOBILE'] 或 config[' TABLET'] 或 config['DESKTOP'] 以加载这些设置:

function _setVideoDimensions() {
  
  screensize = screen.isHandheld ? ( screen.isMobile || screen.isLargeMobileDevice ? 'MOBILE' : 'TABLET' ) : 'DESKTOP';
  dimensionSize = config[ screensize ].dimensions || desktop.dimensions;
}

调整大小辅助函数中的“win.innerWidth !== screen.windowWidth”用于检查滚动时在平板电脑中触发的调整大小事件，即使屏幕实际上并未调整大小。这是一件值得理解的好事情，并且知道在大多数平板电脑中滚动时会发生这种情况。然后我触发了一些需要在调整大小时发生的事件，包括 videoAction 模块中的 resizeVideoJS() 函数 - 并注意到我确保首先使用 _setVideoDimensions() 设置新的视频尺寸。

最后，我确保在调整大小事件上调用调整大小辅助函数，如下所示:

resizeCallback = throttle( _resizeCallbackHelper, 2000 );

$.on( 'window', 'resize', resizeCallback );

我希望这可以帮助任何遇到这个问题的人。