Mediaelement.js在某些浏览器上显示灰色条

Question

我在使用mediaelement.js的网站上嵌入了视频。该视频正确显示除PC Firefox和PC Chrome之外的所有浏览器，其中视频在视频的右侧和底部显示奇怪的灰色条。我确定这是某种编码问题，但不知道如何解决它。

我的代码看起来像这样

<style>
.video embed,.video object, .video iframe, video { width: 100%; height: auto; }
</style>

<video width="960" height="540" style=" cursor:pointer;width: 100%; height: 100%; max-width:960px; max-height:540px; margin: 0 0 0 0; z-index:0;" id="player1" preload="true">
<source type="video/mp4" src="video.mp4" />
</video>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.min.css" />

<script>
    var player = new MediaElementPlayer('#player1', {features:['playpause','backlight','progress','current','duration','volume'],
startLanguage:'en',alwaysShowControls: false,hideControls: true, defaultVideoWidth: 960,defaultVideoHeight: 540
    });

    player.hideControls();
    player.play();
    player.pause();
</script>