스프링 프로젝트, HTML5 Video태그 :: 깨알지식 , 공부공부

#HTML5 video태그에 대해

-여러분들도 개발을 하다보면, 여러상황에 많이들 접하게 됩니다.

-이 글은, 이클립스에서 스프링 프로젝트로 생성하였을 때 있었던 일을 적은 것입니다. 다이나믹 웹프로젝트 등으로 만들었을 때는 정상으로 작동 한다는 것을, 미리 알아두시길 바랍니다.

저는 video태그를 사용해야만 하는 상황이 생겼습니다. 구글링을 통해 얻는 정보로는 무척 심플하고 간단하였습니다.

<video controls width="512" height="250">

<source src="img/mp4" type ="video/mp4">

<source src="img/webm" type ="video/webm">

<source src="img/ogv" type ="video/ogg">

        <source src="">

  <p>지원하지않는 브라우저입니다.</P>

 </video> 

보시는거와 같이, 소스는 간단합니다. HTML5에서는 video태그가 자동으로 브라우저를 인식하는 것 같았습니다.

하지만 지원하지 않는 브라우저경우에도 있습니다. 그 부분에 대해서는 구글링하면 많이 나옵니다.

소스를 간단하게 소개해드리자면, video 태그안에, source라는 것이 브라우저마다 type이 다른 것을 알아서 인식하여 맞춰서 재생하게 만들어주는건데요, 한 마디로, if~else 문 이라고 생각하시면됩니다.

이렇게 경로를 지정하고, 확인을 해보시면 동영상이 제대로 플레이가 되는 것을 확인 할 수 있습니다.

여기서 문제!

저같은 경우는 모바일에서도 실행이 되어야만 했습니다. 그래서 실행을 해본 결과,

PC버전에서는 익스,크롬,오페라,파이어폭스는 정상 재생이 되었습니다. 사파리 빼구요.(예전버젼)

그리고 모바일에서는 안드로이드만 재생이 됬습니다. 아이폰은 불러오긴 하나 실행이 되지 않더라구요.

원인을 찾으면서 수행한 일들을 나열하겠습니다.

1. 아파치와 톰캣의 연동 후, 실행 ( 변화없음)

2. 웹서버인 아파치 파일에 MIME TYPE을 찾아, 해당하는 video와 확장자를 ADDTYPE 시켜줬음 (변화없음)

3. video에 해당하는 codes을 하나하나 다 입력해줌 (변화없음) - 코덱은 브라우저가 영향을 많이 받는듯 함.

타입별 정리되 있는 사이트 링크 걸어두겠습니다 : 코덱

더 많은 짓을 하였지만,, 결과적으로 찾아서 해결하였습니다

아이폰이 접근하여 읽어오지 못했던 점에 대해서 자세하게 나와있고 , 저는 끝까지 진행하지않고, resources mapping부분만 주석처리하고 사이트에 나와있는 부분만 작성하였더니 잘 나왔습니다. 

(4일고생) ,, 이와같이 고생하시는 분 계실까바 글 올립니다. 감사합니다. 

출처: 고생하시는 분들만 보세욧