이러쿵저러쿵


JW Player에서 지원하는 2가지 형태의 스트리밍에 대한 포스팅입니다.

 

 

1. JW Player - RTMP Block

 

 * JW Player는 2가지 타입의 스트리밍을 지원.

   >RTMP 스트리밍 지원 (Adobe Flash Player 기반)
   >HLS 스트리밍 지원 (Apple사에서 개발 및 지원하는 프로토콜 - QuickTime, Safari, OS X, iOS 대응)

 

 

[재생 버튼에 속지 마세요!! 이미지 입니다.. ㅎㅎㅎ]

 

- RTMP와 HLS 에 대해 더 알아보기 - 

포스팅URL : khttp://ozit.tistory.com/106

 

 

* RTMP 지원을 위해 다음의 Configuration Options 지원.

 

옵 션

설 명 

 rtmp.bufferlength

 

 * 스트리밍을 재생하는 동안 항상 어느 정도의 미디어 데이터를 유지할지 저장하는  Video Buffer의 크기를 설정.
 * 버퍼를 작게하면 빠른 시작(start)과 찾기(seek)가 가능하나 re-buffering 이 자주발생 할 수 있음.
 * 기본 값은 3초

 

 rtmp.subscript

 

* 로드밸런싱을 관리하는 더 오래된 스트리밍 서버에 의해 FC Subscribe Mechanism 사용을 가능하게 함. (권장하지 않음)

 

rtmp.securetoken

 

* 이전 Wowza 인스터스를 지원하는 이 옵션은 JW Player에 보안 토큰을 제공. (기본값 empty)

 

 

 

 

2. JW Player로 RTMP Streaming 재생 코드 작성하기

 

 2.1) RTMP 스트리밍 기본 코드

 

 * 단순히 Audio 파일 대신 Full Stream URL을 제공하는 것과 동일.

jwplayer("myElement").setup({
    file: "rtmp://example.com/application/mp4:myVideo.mp4",
    image: "/assets/myVideo.jpg",
    height: 360,
    width: 640
});

 

* 참고 : 모든 모바일 디바이스에서 플래시는 완벽 지원되지 않음. (Desktop에서만 정상적으로 동작)

 

 

 

 2.2) RTMP 스트리밍과 대체 재생 코드

 

 * RTMP 스트리밍을 지원하지 못하는 디바이스 등의 환경에 대응하기 위해 RTMP와 함께 다른 형태의 재생 방식 지원.

 

   - MP4 오디오 파일을 RTMP와 HTTP 두개의 방식으로 로드.
   - 데스크탑에서 호출하면 RTMP 스트림을 통해 재생되고, 모바일에서는 HTTP 다운로드 방식으로 재생.

jwplayer("myElement").setup({
    playlist: [{
        image: "/assets/myVideo.jpg",
        sources: [{
            file: "rtmp://example.com/application/mp4:myVideo.mp4"
        },{
            file: "/assets/myVideo.mp4"
        }]
    }],
    height: 360,
    primary: "flash",
    width: 640
});

 

[위의 코드 설명]

 * Praimary 렌더링 모드로 flash가 설정되어 있기 때문에 기본으로  MP4 재생을 위해 RTMP stream이 선택됨.
 * 만약 Primary 렌더링 모드가 지원되지 않는다면 JW Player는 두번째 방식(HTTP Download)으로 재생 시도.

 

3. RTMP Stream 의 구성

 

 * RTMP Stream 은 Application Path와 Stream Identifier 2부분으로 구성됨.

 

 

[
RTMP Stream URL]

rtmp://example.com/vod/mp4:myFolder/myVideo.mp4

 

The Stream Identifier: mp4:myFolder/video.mp4 (미디어 스트리밍 정보)

 

The Application Path: rtmp://example.com/vod/ (서버 정보)

 

 

 * JW Player는 mp4, flv, mp3 prefix: 의 위치를 기준으로 application path 와 stream identifier를 구분


 

 3-1) RTMP Stream Prefix 종류

mp4: prefix (video)

   - MP4, M4V, MOV, F4V videos.

   - rtmp://example.com/vod/mp4:myFolder/myVideo.mp4

 

flv: prefix

   - FLV vidoes or live streams (with FLV container)

   - rtmp://example.com/vod/flv:myFolder/myVideo.flv / rtmp://example.com/live/flv:myFolder/myLiveStream

 

mp3: prefix

   - MP3 Audio

   - rtmp://example.com/vod/mp3:myFolder/mySong.mp3

 

mp4: prefix (audio)

   - M4A, F4A, AAC audios

   - rtmp://example.com/vod/mp4:myFolder/mySong.m4a

 

 * JWPlayer는 Prefix 를 찾지 못하면 파일명의 마지막 /(Slash) 를 기준으로 applicatio과 stream을 구분(분리). 분리 후, mp4: mp3: 등의 prefix 를 자동으로 붙여줌.
 * 참고) Wowza/Adobe Server는 내부적으로 flv prefix는 사용되지 않기 때문에 JW Player는 스트림 요청 전에 해당 prefix를 제거.

 

 

4. RTMP 의 Configuration 옵션에 대해 더 자세히 알아보기

 4-1) Changing Buffer Length

  * 기본 Buffer Length 값 : 3 초 (미디어의 3초 분량의 데이터를 가져오면 재생 가능 상태로 전환)
  * 일반적인 Buffer Length 설정 범위 : 0.1 초 (낮은 지연 시간으로 실시간 스트리밍), 10 초 (빈번한 재 버퍼링 방지)

jwplayer("myElement").setup({
    file: "rtmp://example.com/vod/mp4:myVideo.mp4",
    height: 360,
    image: "/assets/myVideo.jpg",
    rtmp: {
        bufferlength: 0.1
    },
    width: 640
});

 

 4-2) FC Subscribe

  * Akamai, Edgecast, Limelight CDN을 통해 RTMP Live Streaming 을 하는 경우, 단순히 Live Stream에 접속 불가.
  * 대신 FC Subscribe를 이용하여 서버에 접속. JW Player는 RTMP 옵션을 통해 이를 지원.

jwplayer("myElement").setup({
    file: "rtmp://example.com/xxxx/myStream",
    height: 360,
    image: "/assets/myLivestream.jpg",
    rtmp: {
        subscribe: true
    },
    width: 640
});

 

  * FC Subscribe 을 통해서는 단일 RTMP 스트림만 지원하며, Multi-bitrate live 스트리밍을 이용하려면 HLS 프로토콜 사용.

 

 4-3) Secure Token (보안 토큰)

  * Wowza Media Server 에서 지원.
  * 스트리밍 되는 미디어의 소스를 다운로드로부터 보호하기 위한 기능.


  * RTMP 스트림이 시작되기 전에 서버에 검증된 토큰을 발송하여 검증받는 매커니즘.
  * JW Player는 RTMP securetoken 옵션을 사용하여 이를 지원.

 

jwplayer("myElement").setup({
    file: "rtmp://example.com/vod/mp4:myVideo.mp4",
    height: 360,
    image: "/assets/myVideo.jpg",
    rtmp: {
        securetoken: "Kosif093n203a"
    },
    width: 640
});

 

 

- Wowza Media Security Overview -

http://www.wowza.com/forums/content.php?115

 

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


Comment +3

  • zion0405 2015.02.11 18:10 신고

    안녕하세요.
    PC와 모바일에서 재생이 필요하여
    "2.2) RTMP 스트리밍과 대체 재생 코드" 대로 작성하였는데 PC에서는 재생이 되나
    스마트폰에서는 "Error loading player: No playable sources found" 라는 메세지가 뜨면서 재생이 안되네요.
    어떻게 해야 재생이 되는지 알려주시면 감사하겠습니다.
    아래의 소스 검토 부탁드립니다.


    <html>
    <head>
    <script type="text/javascript" src="http://jwpsrv.com/library/pioYTgJ3EeSXrCIAC0MJiQ.js"></script>
    <meta charset="euc-kr">
    <title>생방송</title>
    </head>

    <body>
    <div>
    <div id='myElement'></div>
    <script type='text/javascript'>
    jwplayer('myElement').setup({
    playlist: [{
    image: '//www.longtailvideo.com/content/images/jw-player/lWMJeVvV-876.jpg',
    sources: [{
    file: "rtmp://flash.stway.net/live/dsch/mobile"
    },{
    file: "/assets/mobile"
    }]
    }],
    title: '생방송',
    width: '100%',
    aspectratio: '16:9',
    autostart: 'true',
    primary: 'flash'
    });
    </script>
    </div>
    </body>
    </html>

    • 안녕하세요. zion0405님. 블로그를 방문해 주셔서 감사합니다.^^

      JWPlayer는 스마트폰의 경우 RTMP 스트리밍을 지원하지 않습니다. PC의 대부분의 주요 브라우저는 모두 RTMP 스트리밍을 지원합니다.

      소스 코드를 보면 RTMP를 우선 재생하도록 하였는데, 이것이 실패되는 경우(안드로이드 또는 아이폰에서 재생하려는 경우), 대체 영상 또는 음원 소스를 찾게 되는데, 소스 코드상에 대체 파일이

      file: "/assets/mobile"

      위와 같이 되어 있습니다.
      실제 위의 경로가 영상이나 음원 파일을 가리켜야 합니다.
      지금 대체 경로가 이를 충족시키지 못한 것으로 보입니다.

      file: "/assets/mobile" 경로가 어떤 재생 가능한 매체를 가리키고 있지 않기 때문에 재생 가능한 소스가 없다고(Error loading player: No playable sources found) 에러 메시지를 표시한 것입니다.

      file: "/assets/mobile" 부분을
      file: "/assets/mobile/media/abcde.mp4" 또는
      file: "/assets/mobile/media/abcde.mp3" 와 같은 형태로 구성해보시기 바랍니다. 물론 file경로에 실제 존재하는 그리고 JW Player에서 재생 가능한 포맷의 파일이 있어야 합니다.^^

  • dodeulB 2016.11.06 21:38

    관리자의 승인을 기다리고 있는 댓글입니다

티스토리 툴바