我正在 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();
}
最佳答案
我认为这是一种很酷的方法,即使在调整事件大小后也能保持视频的宽高比。让我们来分解一下:
- 您需要一个调整大小函数,该函数接受视频的已知宽高比(在我的代码中,它是将“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 );
我希望这可以帮助任何遇到这个问题的人。
关于javascript - 调整视频JS大小,容器调整大小,但实际视频仍然原始大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21702471/