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

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 实际调整视频大小，并且只有原始标记（具有宽度和高度）时...全屏工作正常。

1. 我已经尝试在标记中使用“自动”来表示 with 和 height，尝试将视频调整为它的容器（33% div），所以我不必自己使用api. 但是在w=auto 和h=auto 上，视频呈现没有高度，但似乎具有正确的宽度......它播放......它只是不可见（视频进度条在那里，并且宽度正确（填充 33% 格）。

2. 我已尝试附加到 window.resize，但在使用 API 调整视频大小时遇到​​困难，它真的是“切换”吗..需要知道我是退出还是进入全屏模式...基于对此，我需要调整大小...

有什么想法吗？我是否过于复杂了？

Answer 1

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

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