Растяжка видео для заполнения div с помощью MediaElement.js

Question

Возможно ли это?

Я знаю, что все по-другому, но с мультимедийным проигрывателем jw у вас была возможность растянуть видео, чтобы заполнить div. Это просто, что 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> 

Затем установите контейнер Div медиаконтента в вашем CSS, чтобы быть то, что когда-либо размер вы хотите. Затем видео будет изменено на размер контейнера. Строго говоря, ширина и высота должны быть абсолютными размерами пикселей, но установка% работает.

Вы можете затем создать элемент с чем-то вроде

$(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 
    });