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

发布videoWidth/videoHeight媒体元素js

mediaelement.js html5-video

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 年前

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

推荐文章

Tuvshu247 · 带有章节的React自定义视频播放器不起作用

1 年前

Amirhosein · 如何计算观看视频的百分比

1 年前

roabaot · html5视频无法在带有react的ios设备中工作

2 年前

Vicky Kumar · 如何在流媒体播放时更改视频链接取决于网络速度shaka播放器

2 年前

Josiah Mann · 视频文件滞后于html页面

2 年前

The Old County · AI球体动画视频控制器

2 年前

ramedju · 视频HTML标记无法查找或跳转到视频的特定部分

2 年前

Alex Luya · 如何将html5视频捕获上传到服务器?

7 年前

Bailey Miller · 。用于FileStream视频流的NET Core 2.0 Web API

7 年前

Brett Williams · 当设备上不允许自动播放时,用背景图像替换背景视频[复制]

7 年前