mediaelement.js - 视频缩放选项（例如“适合”或“填充”）答案

【问题标题】：mediaelement.js — Video Scaling Options (e.g. 'fit' or 'fill')mediaelement.js - 视频缩放选项（例如“适合”或“填充”）
【发布时间】：2013-01-30 19:08:04
【问题描述】：

有谁知道在 MEJS 播放器中缩放视频的方法，以便播放器本身可以处理任何信箱或列箱？类似于 JWPlayer 的 'fit' 和 'fill' 选项。

基本上，我有一个位于包装器中的播放器，我会根据用户的屏幕分辨率调整包装器的大小。像这样：

<div id="video_dims_wrapper" style="width: 1280px; height: 720px;">
    <video id="video_player" width="1280" height="720" controls="controls" preload="none" autoplay="autoplay" style="width: 100%; height: 100%;">           

        <source type="video/mp4" src="my_video.mp4" />
        <source type="video/webm" src="my_video.webm" />

        //Flash fallback removed for brevity

    </video>
</div>

然后我只调整 #video_dims_wrapper 的大小，并相应调整其中包含的 MEJS 元素的大小（由于宽度：100%；高度：100%；样式声明）。

如果所有视频都具有相同的宽高比（在这种情况下为 16:9），这很有效，但如果恰好有一个不同宽高比的视频，则它不会在 内调整大小 玩家，而是扩大玩家的总尺寸。

我希望播放器始终保持 16:9 的纵横比，并且视频会缩放以适应播放器，并且播放器会根据需要对视频进行信箱或列框。

有人遇到过这个吗？有什么解决办法吗？

感谢您的帮助。

【问题讨论】：

标签： mediaelement.js

【解决方案1】：

我尝试在 Wordpress 环境中做同样的事情。很抱歉挖掘了这个，但我花了很长时间。但是在查看 mediaelement.js 的源代码时，我发现了这个属性：

// 通过 JS 而不是 CSS 设置尺寸设置维度：真； //（是默认属性）。

我只是在 init 时将其切换为 false（所以我没有编辑源文件）。并用css做造型。瞧！奇迹般有效：）。只能说这个时髦的脚本记录得很糟糕！当然，我在分销商网站上搜索过这样的房产并在谷歌上搜索了时间......但从未发现任何地方报道过。

希望我可以帮助某人；）。只是为了搜索引擎，我搜索了这些标签： Wordpress 视频信箱嵌入 flash 后备 mediaelement.js wp-mediaelement.js

【讨论】：