我有一个绝对定位的div，我希望MediaElement.js用视频填充它。当用户调整窗口大小时，div的大小会发生变化，我希望视频也能随之改变大小
我试过这个家伙的方法，但如果我在调整视频大小后全屏显示，全屏版本就不会再以flash或html5模式填充整个屏幕了。它显示在左上角。
事实上，即使我根本不设置大小信息，并在flash中全屏显示，ui也会有点混乱：搜索栏与暂停/播放按钮重叠。
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视频并调整其大小。myvidsdiv上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: '',
这对flash和HTML5都非常有效
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
});