mediaelement.js - 视频缩放选项(例如'fit'或'fill')

时间:2013-02-14 21:05:17

标签: mediaelement.js

有没有人知道如何在MEJS播放器中扩展视频,以便播放器本身可以处理任何信箱或列盒?与JWPlayer的“适合”和“填充”选项类似。

基本上我有一个包含在包装器中的播放器,我根据用户的屏幕分辨率调整包装器的大小。像这样:

<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),这很有效,但如果恰好有不同宽高比的视频,那么它不会在中调整 strong>玩家,但相当于扩大玩家总体规模。

我想要发生的是,该游戏玩家始终保持16:9的宽高比,并且视频可以根据需要缩放以适应播放器和播放器的信箱或列框视频。

有人碰到这个吗?任何解决方案?

感谢您的帮助。

1 个答案:

答案 0 :(得分:2)

我试图在Wordpress环境中做同样的事情。很抱歉这个,但我接受了我的年龄。但是在查看mediaelement.js的源代码时,我发现了这个属性:

//通过JS而不是CSS设置尺寸 setDimensions:true; //(是默认属性)。

我刚刚将init切换为false(所以我没有编辑源文件)。并用css做了造型。瞧!奇迹般有效 :)。 可以说这个时髦的脚本记录严密!当然,我在经销商网站上搜索了这样的房产并用谷歌搜索了......但是从未在任何地方找到报道。

希望我可以帮助这个人;)。 仅针对搜索引擎,我搜索了theese标签: Wordpress视频信箱嵌入flash后备mediaelement.js wp-mediaelement.js