JWPlayer 강좌 (9) - 스트리밍(Streaming) [2/2]

스트리밍 관련 부분이 많아서 2부분으로 나누었습니다.

참고로 개발 강좌에 있는 JW Player 강좌는 JW Player의 어떤 특별하고, 새로운 정보는 아닙니다.

JW Player의 공식 웹 사이트에서 제공하는 기본 가이드와 Support(지원 페이지)의 내용을 기반으로 주요 내용을 번역하고, 정리한 것입니다.

5. Dynamic RTMP Streaming (앞의 스트리밍 강좌에 이어서)

* JW Player는 Single RTMP Stream을 위해 Dynamic Stream을 지원.
* Dynamic Stream은 동일한 컨텐츠에 대해 모든 다른 품질(Quality)의 Multiple Single Stream로 구성.
* JW Player 는 동일한 스트림에서 다른 품질 간의 자동 또는 수동 전환을 허용.

* 이러한 동적 스트림(Dynamic stream)은 SMIL manifest 파일을 통해 지원.

SMIL
확장자 .smil (RTMP SMIL manifest 파일)
Synchronized Multimedia Integration Language의 약자로, 멀티미디어 데이터를 XML을 이용하여 제어하기 위한 표준 언어.
RTMP application의 location과, RTMP Server에 저장되어 있는 하나 이상의 stream의 경로를 포함.

[RTMP SMIL 파일 형태 ] 플레이어는 항상 확장자 .smil 을 가진 파일을 RTMP SMIL manifest 파일로 가정하고 동작함.

- 용어 설명 -
SMIL : SMIL(Synchronized Multimedia Integration Language)은 멀티미디어 데이터를 XML을 이용하여 시간적, 공간적으로 배치, 제어하기 위한 W3C 표준 프레젠테이션 언어이다. 2008년 기준으로 SMIL 3.0이 최신 버전이다.

* JW Player는 다음의 조건으로 미디어 품질 영상을 자동적으로 제어.
> 현재 접속의 Bandwidth 수준이 SMIL의 System-Bitrate 의 어느 것에 적합한지 확인.
> 현재 플레이어 화면의 사이즈(Width)가 SMIL의 width 의 어느 것에 적합한지 확인.

// RTMP dynamic stream (for desktop), Progressive MP4 download (for mobile)

// 데스크탑 환경에서는 RTMP 스트리밍을 지원하기 때문에 SMIL 파일의 내용을 기반으로 스트리밍 재생되며, 모바일에서는 RTMP를 지원하지 않기 때문에 대체 파일인 MP4 파일을 재생함.

jwplayer("myElement").setup({

playlist: [{

image: "/assets/myVideo.jpg",

sources: [{

file: "/assets/myVideo.smil"

},{

file: "/assets/myVideo.mp4"

}]

}],

height: 360,

primary: "flash",

width: 640

});

* RTMP의 SMIL manifest 파일은 Cross-domain Security Restriction 의 영향을 받음.
* 사용자의 수동으로 Quality 선택 메뉴를 통해 원하는 미디어 품질을 변경할 수 있음.
* SMIL 파일의 height값이 Quality 선택 메뉴의 Label 로 설정됨.
* Wowza Media Server 3 에서 SMIL manifests 파일 지원.

- 참고 URL -

Dynamic RTMP Streaming : http://support.jwplayer.com/customer/portal/articles/1430398-dynamic-rtmp-streaming

6. HLS Adaptive Streaming

* M3U8 manifest 정보를 기반으로 플레이 리스트를 구성하고, 미디어를 재생.
* JW Player는 사용자의 Bandwidth와 Screen Size에 적합한 최적의 품질 미디어를 선택하여 재생하며, 재생하는 동안, Bandwidth의 변화에 따라 스트리밍 품질을 자동적으로 조정함.
* 사용자 또한 Controlbar의 Quality Menu를 통해 직접 제어 가능. (사용자가 제어하면 자동 품질 전환(Automated Quality Switching) 모드는 비활성화 됨.)

M3U8
- Extensible Playlist File Format
- 기본적으로 비디오 파일 정보를 포함하는 UTF-8 인코딩 된 Playlist.
- HTTP Live Streaming 에 대한 색인 파일로 사용.

#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1600000,RESOLUTION=1280x720,NAME="720p HD"
1280/prog_index.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=832000,RESOLUTION=640x360,NAME="360p SD"
640/prog_index.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=320000,RESOLUTION=320x180,NAME="180p 3G"
320/prog_index.m3u8

* JW Player 는 RESOLUTION 값을 통해 플레이어 화면의 비율을 설정함. 비율 설정 값이 없는 경우 16:9 사용.

- 참고 URL -

M3U : http://en.wikipedia.org/wiki/M3U
M3U8 : http://www.gravlab.com/2013/07/05/what-is-an-m3u8-file/

< HTTP Live Streaming Code Example >

* JW Player에서는 단순히 스트림을 위한 M3U8 manifest 파일의 경로만 지정.

<div id="myElement"></div>
<script>
    jwplayer("container").setup({
        androidhls: true,
        image: "http://www.jwplayer.com/wp-content/uploads/social_thumb.png",
        file: "http://playertest.longtailvideo.com/adaptive/bbbfull/bbbfull.m3u8"
});

</script>

#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=357103,RESOLUTION=320x180
bbbfull320x180.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=707099,RESOLUTION=640x360
bbbfull640x360.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1677946,RESOLUTION=1280x720
bbbfull1280x720.m3u8

* HLS의 M3U8 RTMP manifest 파일과 HLS Stream의 TS 조각 파일들은 Cross-domain Security Restriction 의 영향을 받음. 그러므로 플레이어와 다른 도메인 상에 있는 M3U8 은 정상 로드 불가.

- 참고 URL -

Adaptive Bitrate Streaming : http://www.wowza.com/forums/content.php?35
Using HLS Streaming : http://support.jwplayer.com/customer/portal/articles/1430218-using-hls-streaming

저작자표시 비영리 변경금지

'개발&컴퓨터 > 개발강좌' 카테고리의 다른 글

JWPlayer 강좌 (부록) - Cross Domain Problem [2/4] (0)	2015.02.12
JWPlayer 강좌 (부록) - HD Quality Toggling [1/4] (0)	2015.02.08
JWPlayer 강좌 (8) - 스트리밍(Streaming) [1/2] (3)	2015.02.02
JWPlayer 강좌 (7) - Audio Mode (2)	2015.01.26
JWPlayer 강좌 (5) - JW Player의 다양한 옵션들 (2) (17)	2015.01.11

이러쿵저러쿵

JWPlayer 강좌 (9) - 스트리밍(Streaming) [2/2]

'개발&컴퓨터 > 개발강좌' 카테고리의 다른 글

티스토리툴바

JWPlayer 강좌 (9) - 스트리밍(Streaming) [2/2]

'개발&컴퓨터 > 개발강좌' 카테고리의 다른 글

'개발&컴퓨터/개발강좌' Related Articles

티스토리툴바