스트리밍, HTML5 Player

by 라임라이트 기술영업부

스트리밍, HTML5 Player

Video Player는 비디오 시청자와 직접 소통하게 되는 인터페이스 일 뿐만 아니라 클라이언트 환경을 고려한 영상 품질 선택, 콘텐츠보호, 광고처리, 사용자 분석 및 서버 사이드의 에러 처리 등 다양한 역할을 담당하게 됩니다. 이와 같은 기능을 처리하기 위해 네이티브 앱이나 플러그인 기반 앱을 많이 활용해 왔으나, HTML5를 지원하는 브라우저가 다양해 지면서 웹 페이지 내에 HTML5를 활용하여 Video Player를 개발하는 빈도가 높아지고 있습니다. HTML5를 이용해 플레이어를 개발하는 방법의 특징을 살펴보고 주의 해야 될 사항은 어떤 것들이 있는지 알아보겠습니다.

HTML5 Video란?

HTML5 Video는 위의 그림과 같이 웹 페이지 상에 비디오를 보여주기 위한 HTML5 Element입니다. Video Element를 이용해 매우 간단하게 Video Player를 사용자에게 제공해 줄 수 있습니다.

이와 같이 Video Player가 보이는 웹 페이지를 만들기 위한 HTML 코드를 살펴보도록 하겠습니다.

Video 태그 안에 재생할 영상 파일, 영상 화면의 크기 및 버튼을 표시하기 위한 옵션만 표시해도 그럴듯한 플레이어를 웹페이지 사에 표시 해 줄 수 있습니다. 이렇듯 콘텐츠 제작사는 HTML5 Video Element를 이용하면 사용자에게 쉽게 Video Player를 제공해 줄 수 있습니다. Video Player에 대한 실제 구현은 브라우저 벤더에서 HTML5 스펙에 따라 구현해 놓았기 때문에 우리는 Video Element를 통해 입맛에 맞도록 변경해 가며 사용할 수 있습니다.

HTML5 VIDEO를 지원하는 브라우저

http://caniuse.com에서는 HTML5 Element별 브라우저 지원 여부를 한눈에 확인 할 수 있도록 정보를 제공해줍니다. 아래 그림은 HTML5 Video를 지원하는 브라우저 버전을 보여줍니다. 다행히 HTML5 Video는 일부 모바일 브라우저를 제외한 대부분의 주요 브라우저에서 지원이 됩니다.

브라우저에서 HTML5 Video를 지원한다고 해서 무조건 영상이 재생되는 것은 아닙니다. 브라우저가 해석할 수 있는 영상 포맷을 사용하는지 확인이 필요합니다. HTML5에서는 MP4, Webm, Ogg 포맷을 지원하며, 브라우저별 지원되는 포맷이 다르므로 서비스하고자 하는 영상 포맷에 대한 브라우저 지원 여부를 확인 할 수 있습니다.

HP4는 H.264 코덱과 함께 사용되며 대부분의 브라우저에서 지원되는 장점이 있으나 유료 비디오 서비스를 할 경우 라이선스 비용을 고려해야 하므로 MP4 사용 시 라이선스 정책에 대한 정확한 이해가 필요합니다.

HTML5 Video의 기능

HTML5 Video에서는 기본적으로 영상 재생 뿐만 아니라 자막, 비디오 포스터, 대체 영상 파일 지정 등 다양한 기능을 제공합니다. 샘플과 함께 일부 기능들을 살펴보도록 하겠습니다.

Video 태그 안의 poster 속성은 영화 포스터를 보여주듯이 비디오 시작 전에 보여줄 이미지를 설정할 수 있습니다. Source 태그는 다수의 영상 파일을 명시해 주기 위해 사용된 태그입니다. 여기서는 브라우저가 webm 타입의 비디오를 재생할 수 없을 경우 mp4 타입의 비디오를 재생하도록 두 개의 source 태그가 사용되었으며 혹시 mp4 모두 재상이 불가능할 경우 “Your browser does not support the video tag”라는 텍스트를 웹 페이지에 표시되도록 처리하였습니다.

위의 화면은 자막 및 재생 관련 기능을 활용한 예입니다. UI상으로 자막이 추가되고 자막을 끄거나 다른 언어로 변경할 수 있는 메뉴가 생겼습니다. 이와 같은 자막 기능은 TRACK 태그를 이용해 처리가 가능합니다. 우선 src 속성을 통해 자막 파일을 정의하고 kind와 src lang을 통해 영어 자막이 있다는 것을 브라우저에 알려줍니다. 영어 자막을 default 속성으로 처리하여 기본적으로는 영어 자막이 보이도록 하였고, 한극자막 track도 준비하여 kr 선택 시 한글이 보이도록 하였습니다. ​

Video 태그에 loop과 autoplay가 추가된 것으로도 보입니다. Loop은 영상 재생을 마치면 처음으로 돌아가 반복 재생하도록 하는 기능입니다. Autoplay는 웹 페이지 로드 시 비디오를 자동으로 재생하도록 하는 기능입니다. Autoplay에 대응되는 기능으로 preload라는 속성이 있는데 이는 비디오를 자동 재생 시키지 않고 영상 데이터만 미리 받아오도록 처리하거나 Play 버튼을 누르기 전까지는 영상 데이터를 받지 않도록 처리하는데 사용됩니다.

연관된 글