MediaElement.js - 如何动态调整视频大小？

Question

我知道如何将视频加载为不同的尺寸，但我无法弄清楚如何更改它们。例如，在我的应用程序中，视频面板可以调整大小 - 我想重新调整视频大小。问题是，创建了几个元素，我试图避免调整每个子元素的大小，只使用一些内置函数。

发现this option但似乎有点粗糙的解决方案。

Answer 1

<div id="video-wrapper">
    <video width="640" height="360" style="width: 100%; height: 100%;" id="player1">
        <source/>
    </video>
</div>

通过demos / mediaelementplayer-responsive.html文档，它是2.9.3下载的一部分（也在github上）。我知道内联样式很难看但是......它有效！我只是根据需要调整视频包装器的大小（jquery示例）：

var newHeight = 360 / 640 * newWidth;
$('#video-wrapper').css('width',newWidth);
$('#video-wrapper').css('height',newHeight+'px');

Answer 2

适用于YouTube和YouTube的默认视频播放器Vimeo，这通常有助于“响应”调整视频大小： http://FitVidsjs.com/

我有一个朋友在没有MediaElement.js的情况下使用WordPress;它适用于浏览器调整大小，但在它周围留下了一个黑盒子。让我知道如果你能让两个人一起工作得很好，请带一个测试页。 ：）