Mediaelement.js - IE 11을 사용하여 NaN 가져 오기

Question

mediaelement.js 오디오 플레이어에서 진행률 표시 줄과 '재생 시간 표시기'에 NaN이 표시되지만 IE 11에서 보았을 때만 Firefox 26에서 모두 정상입니다. . 이것은 서버 문제가 아니라는 것을 의미하는 것으로 보입니다.

누구나 아이디어가 있으며, 서버 문제 일 가능성이 있다면 (Apache 서버) 무엇이 필요합니까? @BiscuitBaker에서 다음 코드는이 문제를 재현합니다

: 이것은 서버가 Content-Length에 응답하지 않는 경우 인터넷 익스플로러의 문제로 인한 것으로 보인다

$('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

헤더의 경우 audio 요소의 duration 속성은 Infinity입니다. 개발자 도구 콘솔에서 다음 코드를 실행하면이를 볼 수 있습니다.

document.querySelector('audio').duration 

다음은 서버의 응답 헤더 스크린 샷입니다. 나는 Content-Length 헤더로 응답 서버에서 하나 오디오 URL을 대체 할 경우

그러나, 이와 하나로서, 그것은 제대로 작동합니다.

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

archive.org 파일의 헤더 스크린 샷.

내 로컬 서버 떨어져 당신의 파일을 제공함으로써 이중 확인도했습니다, 그리고 Content-Length 공급시에 일했다.

문제는 분명히 서버 구성 문제입니다. 실제로 웹 사이트의 정적 파일에 대한 모든 응답 헤더에는 Content-Length 헤더가 없습니다. 아파치 서버가이 헤더 (아마도 mod_headers 규칙)를 포함하지 않게하는 원인이 무엇인지 모르겠지만 이것이 문제의 원인입니다.