html5-video - 问题 videoWidth / videoHeight mediaelement js

Question

我使用 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 理解 width="100" 和 height="100"。

谢谢你的帮助！

Answer 1

I used this solution:

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