메뉴 닫기

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]

 

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x