Question

我的视频是通过标记实例化的，具有宽度和高度（实际为虚拟值）。

<video id='ytvidplayer' class='video-js vjs-default-skin' controls autoplay
preload='auto' width='xxx' height='xxx' poster='xxx'

data-setup='{}'>

<source src='xxx' type='video/mp4'>
<source src='xxx' type='video/webm'>


Whoops. Your browser does not Support HTML5 or Flash. Please upgrade your browser.
</video>

一旦页面呈现，我正在调整视频大小，宽度为屏幕大小的三分之一（33％）。这一切都运作良好。

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);

一切都按预期工作，直到我试着去全力以赴。按下全屏按钮时，视频对象的物理“黑色”容器会变为全屏，但视频会保持API调整大小的宽度和高度。

这是video.js中的一个错误，是不是在全屏时将API调整大小的值考虑在内（覆盖）它们？

当我没有使用API实际调整视频大小时，只有原始标记（宽度和高度）...全屏工作正常。

我尝试在标记中使用'auto'作为with和height，尝试将视频大小调整到其容器（33％div），所以我不必自己调整大小api。但是在w=auto和h=auto上，视频呈现没有高度，但似乎有正确的宽度...并且它播放..它只是不可见（视频进度条在那里，并且在正确的宽度（填充33％div）。
我已经尝试过附加到window.resize，但是在那里使用API调整视频大小有困难，它是一个“切换”真的..需要知道我是退出还是进入全屏模式...基于在那，我需要调高大小......

有什么想法吗？我是不是太复杂了？

Answer 1

在#ytvidplayer上设置css宽度和高度将是问题所在。 #ytvidplayer将是视频元素或div，具体取决于播放器是否已在该点创建。删除这些并仅使用API调整大小应该有效：

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

使用API调整video.js的大小时，全屏不起作用

1 个答案:

使用API​​调整video.js的大小时，全屏不起作用

1 个答案:

使用API调整video.js的大小时，全屏不起作用