internet-explorer-11 - Mediaelement.js - 使用 IE 11 获取 NaN

Question

在 mediaelement.js 音频播放器上，我在进度条和“持续时间”指示器中得到 NaN，但仅当在 IE 11 中查看时，在 Firefox 26 中一切正常。这似乎暗示这不是服务器问题，但我看到的其他报告说是。

任何人有任何想法，如果它可能是服务器问题，我需要查看什么(Apache 服务器)？

来自@BiscuitBaker 的以下代码将重现此问题:

$('document').ready(function() {
   $('video,audio').mediaelementplayer({
   audioWidth: 440,
   audioHeight: 30,
   // The file contains an audio watermark, so I've set the volume to 0 as I don't want this to be seen as self promotion.
   startVolume: 0 
  });
});

.container {
    margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Standard mediaelement.js files, unmodified -->
<link rel='stylesheet' href='http://beta.musicvine.net/wp-content/themes/theMusicVine/library/js/mediaelement/mediaelementplayer.css' type='text/css' media='all' />
<script src="http://beta.musicvine.net/wp-includes/js/mediaelement/mediaelement-and-player.min.js"></script>

<div class="container">
    <audio controls src="http://beta.musicvine.net/wp-content/uploads/edd/2015/02/joyful-moments-adi-goldstein-preview.mp3"></audio>
</div>

Answer 1

这似乎是由 Internet Explorer 中的问题引起的，如果服务器不响应 Content-Length header ， 的 duration 属性>audio 元素是 Infinity。您可以通过在开发人员工具控制台中运行以下代码来查看这一点。

document.querySelector('audio').duration

这是您服务器的响应 header 的屏幕截图。

但是，如果我将音频 URL 替换为响应 Content-Length header 的服务器中的一个，例如这个，它就可以正常工作。

https://archive.org/download/TESTTEST_174/asdfasdfasdfdfdszadfdsa.mp3

archive.org 文件标题的屏幕截图。

我还通过在我的本地服务器上提供您的文件进行了仔细检查，并且在提供 Content-Length 时它起作用了。

所以您的问题显然是服务器配置问题。事实上，您网站上静态文件的所有响应 header 都缺少 Content-Length header 。我不知道什么会导致 Apache 服务器不包含此 header ，可能是 mod_headers 规则，但这就是您的问题的原因。