mediaelement.js - 使 MediaElement.js 填充其容器并全屏显示

Question

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

我试过 this guy's methods ，但如果我以这种方式调整视频大小后全屏显示视频，全屏版本将不再在 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'
});