使MediaElement.js填充其容器和全屏

Question

我有一个绝对定位的div,我希望MediaElement.js用视频填充它.当用户调整窗口大小时,div的大小会发生变化,我希望视频能够随之改变大小.

我试过这个人的方法,但是如果我在调整大小之后全屏显示视频,那么全屏幕版本不会在flash或html5模式下填满整个屏幕.它显示在左上角.

事实上,即使我根本没有设置尺寸信息并在flash中全屏显示,ui也会变得混乱:搜索栏与暂停/播放按钮重叠.

MediaElement.js是不一致和错误的地狱,但它是我能找到的最好的东西.与Video.js不同,它支持flash全屏.它比JWPlayer更容易定制和主题,并且当我尝试寻找像JWPlayer那样时,它不仅仅跳回到flash视频的开头.如果我能克服它的缺点,它会非常有用.

Answer 1

要配置MediaElement.js以使HTML5和Flash播放器都填充其容器并响应调整大小,您必须执行以下操作:

$('video').mediaelementplayer({
  videoWidth: '100%',
  videoHeight: '100%',
  enableAutosize: true,
  plugins: ['flash'],
  pluginPath: '/swf/',
  flashName: 'flashmediaelement.swf'
});

Answer 2

我正在挖掘 stackoverflow 线程，希望解决与您类似的问题。MEJS 2.9.3 下载附带了一个 demo/mediaelementplayer-responsive.html 示例，该示例对我有用，可以让 div 内的视频大小发生变化：

<div class="wrapper">
    <video width="640" height="360" style="width: 100%; height: 100%; z-index: 4001;" id="player1">
        <!-- Pseudo HTML5 -->
        <source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
    </video>
</div>

从那里像平常一样初始化，然后调整包装器的大小！示例也可以完美地全屏显示。