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

Question

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

发现了这个选项，但它似乎有点粗略的解决方案。

Answer 1

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

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

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

Answer 2

For the default video player for YouTube & Vimeo, this often will help to "responsively" resize vids: http://FitVidsjs.com/

I have had a friend use it with WordPress without MediaElement.js; it worked with the browser resizing, but left a black box around it. Let me know if you can get the 2 to work well together, with a test page please. :)