메뉴 닫기

HLS (HTTP Live Streaming) 이용 메뉴얼

idchowto_cover1

※ PDF 메뉴얼도 함께 제공됩니다.
   다운로드 (클릭) : 
CDN_HLS_이용_메뉴얼_20140930

 

HLS (HTTP Live Streaming) 이용 메뉴얼
(
주)스마일서브 솔루션사업본부 CDN 사업팀
작성일 : 2014. 09. 30

1. HLS 소개

Apple (iPhone, iPad 등) 의 운영체제인 iOS 에서 사용하는 표준 HTTP 기반
스트리밍 프로토콜이다.

2. HLS 지원대상

스마트기기 : iPhone, iPad, Android Phone, Android Tablet
운영체제 : iOS 3.0 이상, Android 3.0 이상
컨텐츠 형식 : MP4 (영상 : H.264 , 음성 : AAC), MP3

3. HLS 지원 서비스 상품

플래시 + 모바일 VOD (WOWZA)

4. M3U8 파일 및 HLS 서비스 URL

4.1 M3U8 파일 생성

M3U8 파일은 HLS 에 필요한 메타데이터를 담고 있는 파일이며, 별도 업로드 없이
스트리밍 서버에서 자동으로 생성 된다.

 


4.2 HLS
서비스 URL

(1) 기본 URL 구성

< 서비스 URL > + < 컨텐츠(파일) > + /playlist.m3u8

※ 기본 서비스 URL 은 http://서비스도메인:1935/channel_name/_definst_ 이다.
※ HLS
는 TCP 1935번 포트를 사용한다.

(2) 사용예

http://sample.smilecdn.com/sample/_definst_/sample.mp4/playlist.m3u8

5. iOS 에서 재생하기

5.1 A 태그를 이용한 재생

(1) 사용법

<HTML>

<BODY>

<a href=”서비스 URL + 컨텐츠 + /playlist.m3u8>VOD PLAY</a>
</BODY>
</HTML>


(2)
사용예

<HTML>

<BODY>

<a href=”http://sample.smilecdn.com:1935/sample/_definst_/sample.mp4/playlist.m3u8”>SAMPLE</a>
</BODY>
</HTML>

 

5.2 Video/Audio 태그를 이용한 재생

(1) 사용법

<HTML>

<BODY>
<video controls= width=”640” height=”270”>

<source src=”서비스 URL + 컨텐츠 + /playlist.m3u8”>
</video>
</BODY>
</HTML>

 

(2) 사용예

<HTML>

<BODY>
<video controls width=”640” height=”270”>

<source src=”http://sample.smilecdn.com:1935/sample/_definst_/sample.mp4/playlist.m3u8” controls>
</video>
</BODY>
</HTML>


※ Video
태그는 자동 재생하지 않으므로, 직접 재생 버튼을 눌러줘야 한다.
※ Audio
태그는 video src 대신 audio src 라고 쓰면 된다.

 


6. Android
에서 재생하기

6.1 A 태그를 이용한 재생

(1) 사용법

<HTML>

<BODY>

<a href=”서비스 URL + 컨텐츠 + /playlist.m3u8>VOD PLAY</a>
</BODY>
</HTML>

 

(2) 사용예

<HTML>

<BODY>

<a href=”http://sample.smilecdn.com:1935/sample/_definst_/sample.mp4/playlist.m3u8”>SAMPLE</a>
</BODY>
</HTML>

 

6.2 Video/Audio 태그를 이용한 재생

(1) 사용법

<HTML>

<BODY>
<video controls= width=”640” height=”270”>

<source src=”서비스 URL + 컨텐츠 + /playlist.m3u8”>
</video>
</BODY>
</HTML>

 

(2) 사용예

<HTML>

<BODY>
<video controls width=”640” height=”270”>

<source src=”http://sample.smilecdn.com:1935/sample/_definst_/sample.mp4/playlist.m3u8” controls>
</video>
</BODY>
</HTML>


※ Video
태그는 자동 재생하지 않으므로, 직접 재생 버튼을 눌러줘야 한다.
※ Audio
태그는 video src 대신 audio src 라고 쓰면 된다.

 

7. HLS 브라우저, 장치별 지원여부

다음 표는 HLS 를 지원하는 브라우저, 장치에 대한 테스트 확인 사항입니다.

 

브라우저

일반적인 HLS

Adaptive HLS

Firefox 25

–

–

Chrome 30

–

–

Safari 6

yes

yes

Internet Explorer 11

–

–

iOS 6 (iPad)

yes

yes

iOS 7 (iPad)

yes

yes

Android 4.0 (Browser)

yes 주)1,2,3

–

Android 4.2 (Chrome)

yes 주)1,3

yes

Android 4.2 (Browser)

yes 주)1

yes

Android 4.4 (Chrome)

yes

yes


주1) 처음 스트리밍을 시작할때, 음성만 재생됩니다.
플레이/일시정지 버튼 후 음성도 재생됩니다.
주2) 영상 비율이 왜곡될 수 있습니다.
주3) 창 모드에서는 재생되지 않습니다. (하지만, 전체화면에서는 재생됩니다.)

* 참고 URL : http://jwplayer.com/html5/hls/

감 사 합 니 다

 

[polldaddy rating=7739789]

 

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다