使 MediaElement.js 填充其容器并全屏显示答案

【问题标题】：Make MediaElement.js fill its container and fullscreen使 MediaElement.js 填充其容器并全屏显示
【发布时间】：2012-04-05 10:53:02
【问题描述】：

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

我尝试了this guy's methods，但如果我在调整视频大小后全屏显示，全屏版本在 Flash 或 html5 模式下不再填满整个屏幕。它显示在左上角。

事实上，即使我根本没有设置大小信息并在 flash 中全屏显示，用户界面也会变得混乱：搜索栏与暂停/播放按钮重叠。

MediaElement.js 不一致且漏洞百出，但这是我能找到的最好的东西。与 Video.js 不同，它支持 flash 全屏。它比 JWPlayer 更容易定制和主题化，并且当我尝试像 JWPlayer 那样搜索时，它不会跳回到 Flash 视频的开头。如果我能克服它的缺点，那将非常有用。

【问题讨论】：

你能解决这个问题吗？
不，还没有。 MediaElement 似乎有点不必要的复杂。可以深入研究或探索替代方案。

标签： mediaelement.js

【解决方案1】：

要配置 MediaElement.js 以使 HTML5 和 Flash 播放器填充它们的容器并响应调整大小，您必须这样做：

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

【讨论】：

对我来说效果很好。

【解决方案2】：

经过大量测试，我发现视频属性的顺序对在 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: []
});

【讨论】：

【解决方案3】：

我正在挖掘 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>

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

【讨论】：

对我没用...从投票来看，您的答案对任何人都不起作用？

【解决方案4】：

我默认使用闪光灯

$('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: '',

【讨论】：

【解决方案5】：

这对于 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
    });

我花了一些时间才弄明白，所以请务必 +1！

【讨论】：