2013-09-06 2 views
0

Я использую mediaelement.js и мне нужно переопределить ширину и высоту видео элемента, но он не работает:выпуск videoWidth/videoHeight MediaElement JS

<video id="v1" width="960" height="720"> 
    <source src="video.mp4" type="video/mp4" /> 
</video> 

<script> 
    player1 = new MediaElementPlayer('#v1',{ features: [], videoWidth: 1323, videoHeight: 995 }); 
    player1.play(); 
</script> 

У меня есть контейнер div.mejs-MediaElement в 1323x995, но видео все еще на 960x720.

Если я:

<video id="v1" width="100%" height="100%"> 

Это работает, но не на IE9 ... IE9 понимает ширина = "100" и высота = "100".

Благодарим за помощь!

ответ

0

Я использовал это решение:

function scaleToFill(videoTag) { 
    var $video = $(videoTag), 
     videoRatio = videoTag.videoWidth/videoTag.videoHeight, 
     tagRatio = $video.width()/$video.height(); 
    if (videoRatio < tagRatio) { 
     $video.css('-webkit-transform','scaleX(' + tagRatio/videoRatio + ')') 
    } else if (tagRatio < videoRatio) { 
     $video.css('-webkit-transform','scaleY(' + videoRatio/tagRatio + ')') 
    } 
} 

function calc(){ 
    $("video").each(function(){ 
     scaleToFill($(this)[0]); 
    }); 
} 
calc(); 

$(window).on('resize', function(){ 
    calc(); 
}); 
Смежные вопросы