我有一个绝对定位的 div，我希望 MediaElement.js 用视频填充它。当用户调整窗口大小时，div 的大小会发生变化，我希望视频随之改变大小。
我尝试了这个人的方法，但是如果我在调整大小后全屏显示视频，全屏版本不会再在 Flash 或 html5 模式下填满整个屏幕。它显示在左上角。
事实上，即使我根本没有设置大小信息并在 Flash 中全屏显示，用户界面也会变得混乱：搜索栏与暂停/播放按钮重叠。
MediaElement.js 不一致且漏洞百出，但这是我能找到的最好的东西。与 Video.js 不同，它支持 flash 全屏。它比 JWPlayer 更容易定制和主题化，并且当我尝试像 JWPlayer 那样搜索时，它不会跳回到 Flash 视频的开头。如果我能克服它的缺点，那将非常有用。
要配置 MediaElement.js 以使 HTML5 和 Flash 播放器填充它们的容器并响应地调整大小，您必须这样做：
$('video').mediaelementplayer({
videoWidth: '100%',
videoHeight: '100%',
enableAutosize: true,
plugins: ['flash'],
pluginPath: '/swf/',
flashName: 'flashmediaelement.swf'
});
经过大量测试，我发现视频属性的顺序对在 mediaelement 中正确播放视频有很大的影响。使用以下设置可让您在所有浏览器中播放 youtube 视频并调整其大小。myvids div 上 50% 的宽度看起来很奇怪，但没有它，视频在 IE 中的大小将不正确。在这一点上，我只有一个要解决的问题。在 iPad 上打开时，播放按钮会移动到视频的左上角。如果我在视频上设置宽度和高度而不是百分比，则播放按钮会正确显示，但播放器不会调整大小。
<div class="myvids" id="viddivap1" width="50%" style="width:100%;position:relative;">
<video class="thevid" width="640" height="360" style="max-width:100%;height:100%;" id="my_video_ap1" preload="auto" autoplay controls="controls" >
<source type="video/youtube" src="http://www.youtube.com/watch?v=FAGL9gxhdHM" />
<span style="color:white;">Your browser does not support HTML5, Flash, or Silverlight. Please update your browser.</span>
</video>
</div>
$('video').mediaelementplayer({
// if set, overrides <video width>
videoWidth: -1,
// if set, overrides <video height>
videoHeight: -1,
// width of audio player
audioWidth: 400,
// height of audio player
audioHeight: 30,
// initial volume when the player starts
startVolume: 0.8,
// useful for <audio> player loops
loop: false,
// enables Flash and Silverlight to resize to content size
enableAutosize: true,
// the order of controls you want on the control bar (and other plugins below)
features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],
// Hide controls when playing and mouse is not over the video
alwaysShowControls: false,
// force iPad's native controls
iPadUseNativeControls: false,
// force iPhone's native controls
iPhoneUseNativeControls: false,
// force Android's native controls
AndroidUseNativeControls: false,
// forces the hour marker (##:00:00)
alwaysShowHours: false,
// show framecount in timecode (##:00:00:00)
showTimecodeFrameCount: false,
// used when showTimecodeFrameCount is set to true
framesPerSecond: 25,
// turns keyboard support on and off for this instance
enableKeyboard: true,
// when this player starts, it will pause other players
pauseOtherPlayers: true,
// array of keyboard commands
keyActions: []
});
我正在挖掘 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>
从那里像往常一样初始化，然后调整包装器的大小！示例也可以完美地全屏显示。
我默认使用闪光灯
$('video,audio').mediaelementplayer( { mode: 'auto_plugin' } );
我嗅探了代码并阅读了以下内容
mejs.MediaElementDefaults = {
// allows testing on HTML5, flash, silverlight
// auto: attempts to detect what the browser can do
// auto_plugin: prefer plugins and then attempt native HTML5
// native: forces HTML5 playback
// shim: disallows HTML5, will attempt either Flash or Silverlight
// none: forces fallback view
mode: 'auto',
// remove or reorder to change plugin priority and availability
plugins: ['flash','silverlight','youtube','vimeo'],
// shows debug errors on screen
enablePluginDebug: false,
// overrides the type specified, useful for dynamic instantiation
type: '',
CSS：无缝全屏视频，可嵌入 iframe。
body{width: 100%; height: 100%; margin: 0; padding: 0; overflow:hidden;}
video{max-height:100%}
.me-plugin {width: 100%; height: 100%;}
HTML：
<video style="width: 100%; height: 100%;">
JS：以防万一——我把这个加入了。
var x = $(window).width();
var y = $(window).height();
$(window).resize(function() {
var x = $(window).width();
var y = $(window).height();
});
// Initialize your video
$('video').mediaelementplayer({
defaultVideoWidth: x,
defaultVideoHeight: y
});