代码之家  ›  专栏  ›  技术社区  ›  july13

发布videoWidth/videoHeight媒体元素js

  •  0
  • july13  · 技术社区  · 12 年前

    我使用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)。

    谢谢你的帮助!

    1 回复  |  直到 12 年前
        1
  •  1
  •   Luigi De Rosa    12 年前

    我使用了这个解决方案:

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