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

我使用了这个解决方案：

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

发出videoWidth / videoHeight mediaelement js

1 个答案: