Question

我正在window.resize

上调整我的videojs播放器的大小

黑色的“视频容器”，如果你愿意，会调整大小，但实际的视频大小保持不变。它现在将在其容器内缩小（调整大小），或与其容器重叠（调整为较小）。

页面重新加载会重建播放器并在新界限内播放。

如何在不重新加载页面的情况下告诉它重新初始化新大小。

使这个更有趣的是，它似乎在我的localhost，开发Web服务器上运行时起作用。在在线托管上运行它，呈现上述问题。

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

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

您需要一个调整视频已知宽高比的调整大小功能（在我的代码中，它是传递给resizeVideoJS（）函数的'dimensionsize'参数，如下所示：'1920x760'。其他参数是初始化的videoJS视频对象'video'和浏览器窗口对象'win'。）我传入的参数因为我的代码被分成两个模块，一个模块处理动作和辅助函数 - 比如resizeVideo或togglePoster等 - 另一个是用于初始化事件并将事件绑定到视频对象的窗口小部件。 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的节流函数，因为调整大小事件可以快速启动）。

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：{dimensions：'760x320'，muted：false}}。但你可以随心所欲地做到这一点。我喜欢这个，因为它允许跨不同设备进行自定义设置。我使用下面的_setVideoDimensions（）函数定义我的尺寸和屏幕大小，其中屏幕是一个对象，其中布尔告诉视频正在加载哪种屏幕类型。正如您所见，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（）设置新的视频尺寸。

最后，我确保在resize事件上调用resize helper函数，如下所示：

resizeCallback = throttle( _resizeCallbackHelper, 2000 );

$.on( 'window', 'resize', resizeCallback );

我希望这有助于任何人遇到这个问题。

调整videoJS的大小，调整容器大小，但实际的vid仍然是原始大小

1 个答案: