0

私は 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" を理解します。

ご協力いただきありがとうございます！

4

1 に答える 1

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();
});
于 2013-09-06T14:18:31.847 に答える