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'
});

Answer 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: []
});

Answer 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>

从那里初始化正常，然后调整包装器的大小！示例也完美地完成了全屏。

Answer 4

我使用flash作为默认值

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

Answer 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
    });

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

5 个答案:

这对于flash和HTML5都非常有用。

这花了我一些时间来弄清楚所以一定要+1！