javascript - 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>