HTML5 <Video> 태그 사용시 "잘못된 원본" 오류 해결

웹 페이지에 HTML5 동영상 컨트롤 추가 (Windows)

위 주소에 있는 것처럼 HTML5 페이지에서 <Video>태그를 사용하여 동영상 플레이어를 만들고자 할때 분명히 서버에 정확한 위치에 동영상 파일이 있음에도 "잘못된 원본" 이라는 오류가 발생하면서 동영상 플레이가 되지 않은 경우가 있다.

 <video controls poster="demo.jpg"> 
        <source src="demo.mp4" type="video/mp4" /> 
        <source src="demo.webm" type="video/webm"/> 
        <source src="demo.ogv" type="video/ogg"/> 
        <object> 
               <embed src="demo.mp4" type= "application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="always" /> 
       </object> 
       HTML5 Video is required for this example 
  </video>

이 오류의 원인은 서버거 mp4, webm, ogv 확장자의 파일을 인식하지 못하기 때문이다.
이 오류를 해결하기 위해서는 서버의 IIS설정에서 MIME형식을 추가해주면 된다.

IIS 관리자 화면에 들어가서 해당 웹 사이트를 클릭하면 아래와 같이 "MIME 형식" 이라는 메뉴가 있다.

이 메뉴를 더블 클릭해서 들어간 다음 오른쪽에 [추가...] 버튼을 클릭해서 MIME 형식을 추가해주면 된다.

 

.mp4 : video/mp4
.webm : video/webm
.ogv : video/ogg

 

위에처럼 했는데도 하얀화면만 나오시고 안되시는 분들 있으실 겁니다.

저도 위에처럼 했는데도 안되서 IIS를 하루정도 엄청 찾아봤습니다.

웹사이트에 보시면 HTTP응답헤더라고 있습니다. 

더블클릭해주시구요.

 

여기 보시면 X-UA-Compatible이라는 헤더항목이 IIS초기 구성에는 없는항목입니다.

여기에 이렇게 IE-Emulate8이라고 되어 있으면 IE8에 맞춰주는 설정값이여서 이 값이

설정되어 있으면 하얀화면만 나오고 동영상 재생이 안됩니다.

이부분 제거 해주시면 됩니다.

위 3가지를 그림과 같은 형식으로 추가해주고 웹사이트를 재시작 해주면 해결된다.

좋은 하루 되시고 행복하세요^^