使用MediaElement.js拉伸視頻以填滿div

Question

這可能嗎？

我知道這是一個不同的事情，但與jw媒體播放器，你可以選擇延長視頻來填補分區。它只是html5在這樣的事情上嗤之以鼻？

感謝，

Answer 1

嘗試設置以下

<div id="mediaContent"> 
        <video id="mediaPlayer" width="100%" height="100%"> 
         <source type="video/mp4" src="http://clips.vorwaerts-gmbh.debig_buck_bunny.mp4" /> 

        </video> 
       </div> 

然後設置在CSS的div容器mediaContent是什麼都大小你想要的。 視頻將重新調整容器大小。 嚴格地說，寬度和高度應該是絕對像素尺寸，但設置爲％有效。

然後你可以有基於上述答案設置了一些元素像

$(document).ready(function() { 

     var myPlayer = $('#mediaPlayer'); 

     var w = parseInt($('#mediaContent').css('width')); 
     var h = parseInt($('#mediaContent').css('height')) ; 

     myPlayer.mediaelementplayer({ 
      // if the <video width> is not specified, this is the default 
      defaultVideoWidth: w , 
      // if the <video height> is not specified, this is the default 
      defaultVideoHeight: h, 
      // 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, 

      // 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 2

，下面的一個工作對我來說：

// Get video container width and height 
var w = $('#video').parent().width(); 
var h = $('#video').parent().height(); 
$('#video') 
    .attr('width', w) 
    .attr('height', h) 
    .delay(500) // don't know why, but without this sometimes it doesn't work. 
    .mediaelementplayer({ 
     defaultVideoWidth: w 
     , defaultVideoHeight: h 
     , videoWidth: -1 
     , videoHeight: -1 
     , enableAutosize: true 
    });