HTML5 VIDEO 태그를 이용하여 동영상 스트리밍
웹 스트리밍을 통해
동영상 재생하기
1. 웹에서 스트리밍하기 |
지난 시간에 스트리밍 서버를 구축하는 방법에 대해서 포스팅을 작성하였습니다. 하지만 지난번처럼 주소열기 방식으로는 반드시 동영상 플레이어가 필요합니다. 물론 단순한 스트리밍 정도의 수준이라면 모바일 어플에서도 지원합니다. 또한 유료어플중 WebDAV와 FTP서버를 지원하는 어플이라면 별다른 스트리밍을 설치하지 않아도 어플 자체적으로 스트리밍을 해서 영상을 재생합니다.
하지만, 제가 원하는 스타일은 이런 것이 아니라 어플이 설치되지 않는 기기, 또는 동영상 플레이어가 설치되지 않은 환경에서 인터넷만 된다면 바로 재생할 수 있는 YouTube 같은 그런 서비스를 원했습니다.
앞으로 HTML5태그 중 <video> 태그를 소개할 예정입니다. 하지만 이것 외에 외부 소스를 사용한다면 JWPlayer 와 VIDEO.JS라는 플레이어가 있습니다. 좀 더 강력한 기능을 가진 플레이어인데 다음에 기회가 되면 소개하도록 하겠습니다.
인터넷만 되는 환경이라면 데스크탑이든 모바일이든 가리지 않고 동영상을 재생하는 그런 서비스를 구축하기 위해서, 약간은 번거롭지만 동영상 감상은 편리한 방법에 대해서 알아봅시다..
2. HTML5에 대해 |
새로운 HTML 태그 양식중에 웹 어플리케이션을 모두 담고, 간단한 명령어로 바꿔주는 태그가 존재합니다.
상단에 로고를 보면 HTML5라고 되어 있는데 이번에 소개드릴 HTML5 태그는 바로 강력한 어플리케이션 기능과 간단한 코드를 담고 있는 요즘 떠오르는 코드입니다.
스마트폰이 본격적으로 보급되기 전 아이폰 또는 아이팟 터치가 막 나오던 시절을 떠올려보면 그런 모바일 기기에서 웹에 올려져 있는 동영상은 전혀 재생이 불가했습니다. 뭐, 현재도 재생 불가능한 동영상들은 많이 있지만 그 때는 유투브나 네이버 동영상 조차 재생이 불가하였습니다.
그런데 어느순간 모바일 기기에서도 동영상 시청이 가능하게 되었는데, 그 계기가 바로 HTML5입니다.
플래시(또는 외부 추가 프로그램)로 재생되던 동영상들이 하나둘씩 바뀌기 시작했고, 모바일 동영상 시장은 크게 변화하였습니다. 자체 코드 어플리케이션에서 동영상을 재생하는 방식인 HTML5는 플러그인 설치가 필요없이 바로 동영상이 재생 가능했기 때문에 모바일에서 재생이 가능했습니다.
저도 기기를 가리지 않고 동영상을 재생하고 싶었기 때문에 이 HTML5 태그를 쓰기로합니다.
HTML5 의 훌륭한 태그중 video 태그를 사용합니다.
기존에 사용하던 <embed> 태그에서 간단히 <video>태그로 변경하는데 YouTube 태그를 복사해보신 분들은 알겠지만, 꽤나 복잡합니다. 특히 추가로 실행시켜야 하는 어플리케이션을 따로 입력해야 하기 때문에 태그 내용도 길어질 수 밖에 없었습니다.
하지만, <video>태그는 아주 간단합니다.
3. HTML5를 사용하기 위한 조건 |
이렇게 편리한 HTML5 코드는 애석하지만 모든 환경에서 지원되지는 않습니다. 각 브라우저 별로 지원하는 환경이 다릅니다.
브라우저 중에서 크롬, 파이어폭스, 사파리, 오페라 등은 HTML5를 지원합니다.
대신 우리 나라에서 가장 많이 사용하는 브라우저인 인터넷 익스플로러는 버전별로 다릅니다.
익스플로러 9 이상은 HTML5를 지원하지만 그보다 낮은 버전은 지원하지 않습니다. (아직 XP 사용자이며, 다른 브라우저를 쓰지 않는 경우에는 HTML5태그 지원이 불가능합니다.)
현재 사용하는 브라우저가 HTML5를 지원하는지 확인하려면 다음 사이트에 접속하지면 됩니다.
그리고 이 <video> 태그를 이용하려면 반드시 필요한 조건은 파일 확장자가 mp4, ogg/ogv, webm 파일만 지원합니다. 다른 확장자는 생소하니 mp4로 되어있는 동영상만 지원하능한 것을 기억하면 될 것 같네요.
4. 본격적으로 사용하기 |
태그 삽입은 의외로 간단합니다.
- <video src="비디오파일주소"></video>
- <video src="비디오파일주소" controls loop muted autoplay poster="이미지주소">브라우저가 지원하지 못할 시 표시할 내용</video>
일반적으로 사용하기 위해서는 이정도 쯤이면 적당합니다.
- <video src="비디오주소" controls>이 브라우저는 재생할 수 없습니다.</video>
5. 재생가능한지 확인해보기 |
새로 HTML파일을 만들어도 좋고, 게시판에 html태그로 입력해도 좋고 html를 사용할 수 있는 환경이면 어디든지 좋습니다. 브라우저 차원에서 지원되기 때문에 태그만 확실하면 됩니다.
저는 조금 더 좋은 접근성을 위해 제 개인서버에 설치된 XE를 통해 실 사용을 해보도록 하겠습니다. 게시판 형태로 해서 앞으로 동영상들을 보기 쉽게 하기 위함입니다.
글쓰기 기능중 소스보기로 변환해서 비디오 소스를 입력합니다.
위에 적어 놓은 방법대로 입력을 하고 완료를 눌러서 글을 저장하도록 하겠습니다. 실제로 실행해 보니 아주 잘 되는 군요. 그리고 모바일에서 아무 문제없이 재생되는 것을 확인하였습니다. (아이폰, 아이패드)
6. Sample 테스트 |
Techslides.com 에서 제공한 샘플 동여상을 토대로 실제로 동영상이 어떻게 실행되는지 확인하세요.
5초의 짧은 동영상이지만 이 video 태그가 어떻게 작동하는 지는 확인 하실 수 있습니다.
이제 웹 페이지에 동영상을 삽입하는 법을 배웠습니다. 가급적이면 게시판에서 동영상을 감상하기 위해서는 mp4파일로 준비를 하여야 하는데, 원래부터 mp4파일이면 다행이지만, 다른 형식의 파일인 경우에는 변환해야 하는데 그 인코딩 방법에 대해서는 다음시간에 소개를 하도록 하겠습니다.
