이러쿵저러쿵


JW Player는 실제 플레이어를 제어하고, 꾸미고, 차별화 시키기 위한 다양한 옵션들을 제공합니다.

JW Player의 기본적인 재생 환경을 위한 일반적인 옵션과 추가적인 옵션들로 구분하여 포스팅을 진행합니다.

 

강좌4)에서는 일반 옵션, 강좌5)에서는 더 많은 추가 옵션에 대해 알아보겠습니다. (사실 일반, 추가 구분되어 있지는 않은데, 플레이어의 기본이라 생각되는 기능들을 일반 옵션으로, 부가적인 기능이라 생각되는 것들을 추가 옵션으로 구분하였습니다.)

 

     [일반 옵션]

    * Basic Options
    * Playlist
    * Listbar Block
    * Captions Block
    * Logo Block


 

     [추가 옵션]

    * Google Analytics / SiteCatalyst Block
    * Sharing Block
    * Related Block
    * Advertising Block
    * Other Options


 

 

1. Basic Options (기본 옵션들)

 

 * JW 플레이어의 기본적인 레이아웃 설정과 재생 동작을 구현하기 위한 기본적인 옵션들을 제공. 

 

 옵션

설명 

 aspectratio

 * 화면의 비율 설정. 디바이스 웹 브라우저의 width 값 변화에 따라 자동으로 플레이어의 사이즈를 조절(Scaling). 이 옵션이 설정되어 있다면 height 속성 값은 무시.
 * 반응형 웹을 만들 때, 사용.

 autostart

 * JW Player가 포함된 페이지가 로드 완료되면 바로 재생
 * 모바일 디바이스에서는 미 지원.

 controls

 * 미디어 컨트롤(Controlbar, Display Icon, Dock Buttons) 의 표시 여부.
 * True : 표시, False : 숨김

file 

 * 단일 비디오, 오디오, 유튜브 영상 또는 라이브 스트림 경로(URL).
 * PlayList Block을 구성하는 경우, dl 옵션은 무시됨.

 height

 * 플레이어의 높이(픽셀 단위). 최소 180px 이상 권장. 기본 270px.
 * 40px로 설정하는 경우 Audio-Only 재생 모드.

 image

 * 미디어 재생 전 또는 후 표시할 포스터 이미지
 * Audio-Only 모드인 경우, 포스터 이미지는 재생하는 동안 표시됨.
 * Playlist를 사용하는 경우 무시됨.

 mute

 * 재생시 음소거 설정.
 * 기본값은 false 이며, 모바일 디바이스에서는 적용되지 않음.

 primary

 * 플레이어 렌더링 모드 (HTML5 (기본 값), FLASH)

 repeat

 * 플레이 리스트의 재생 반복 모드
 * true : 무한 반복, false : 한번 재생(기본 값)

 skin

 * 플레이어의 스타일을 위한 스킨
 * JW Player에서 자체 제공하는 8가지 스킨 중의 하나의 이름을 입력
 * Custom Skin을 사용하는 경우, 스타일을 정의한 XML 파일의 URL

 width

 * 플레이어의 너비 (기본 480px) / 최소 320px 이상을 권장.
 * Width : 100%로 설정하고, aspectratio 옵션과 함께 사용하는 경우, 반응형 플레이어로 동작함.

 androidhls

 * Android 디바이스 4.1 이상에서 HLS 비디오 소스를 재생하기 위한 옵션

 hlslabels

 * 비디오 품질 수준을 설정.
 * 일반적으로 manifest 파일을 통해 설정되나, 이 옵션을 통해 원하는 대역폭(bandwidth)에 임의의 비디오 품질 수준 레이블을 지정할 수 있음.

 

    hlslabels:{
        "high":"2500",
        “medium":"1000"
    },

 

 

2. Playlist (플레이리스트)

 

 * 다량의 미디어 아이템을 불러와 순차적으로 재생할 수 있는 기능을 지원.

 * 개별 아이템들은 메타 데이터, 다량의 미디어 소스(HD Toggle), 다량의 텍스트 트랙(CC toggle) 정보 들을 포함할 수 있음.

 * Playlist 는 개별 옵션 또는 블록 형태로 설정 (2가지 형태로 설정 - option type or block type)

 

Option 형태로 사용할 때에는  미디어 컨텐츠 아이템과 속성 등을 포함하고 있는 RSS feed 의 경로를 설정.

Block 형태로 사용할 때에는 아이템을 배열 형태로 포함하고, 개별 아이템들은 음원 소스, 트랙 등에 대한 정보를 배열 형태로 포함.

 jwplayer("myElement").setup({
    playlist: "
http://example.com/myPlaylist.rss"
 });

 

 

 

 

 

 

 


 

 

 jwplayer("myElement").setup({
    playlist: [{
        image: "/assets/sintel.jpg",
        sources: [{
            file: "/assets/sintel.mp4"
        }],
        title: "Sintel Movie Trailer",
        tracks: [{
            file: "/assets/captions.vtt"
        }]
    }]
 });

 

 

 

 * Playlist Options (플레이리스트를 위한 옵션들)

 Playlist[].

설명 

 title

 * 미디어 아이템 제목. 재생 시작 전 표시되는 재생 아이콘 내에 표시되며 Listbar 에도 표시됨.

 description

 * 아이템에 대한 간단한 설명. Listbar 에 표시.

 mediaid

 * 개별 아이템 고유 번호. 광고, 분석 도구 등에서 사용.

 image

 * 아이템을 대표하는 포스터 이미지. 재생 전 후에 표시됨. Listbar 에도 표시.

 sources[].file

 * 비디오, 오디오, 유튜브 및 라이브 스트림 URL.

 sources[].label

 * 미디어 소스의 레이블. HD 선택 메뉴에 표시되는 텍스트로 2개 이상의 미디어 품질(Quality) 선택이 있는 경우에 적용. 유튜브에서의 품질 선택(240p, 360p, 480p, 720p(HD)) 메뉴와 동일.

 sources[].default

 * Playlist 중에서 첫번째로 재생될 아이템.
 * 설정되어 있지 않으면 Playlist의 첫 번째 아이템이 재생됨.

 tracks[].file

 * 자막(Captions), 챕터(Chapters), 썸네일(Thumbnails)에 관한 텍스트 트랙 파일의 URL.

 tracks[].kind

 * tracks[].file 에 지정된 텍스트 트랙의 종류.
 * captions (default), chapters, thumbnails. 중에 하나를 지정.

 tracks[].label

 * 텍스트 트랙 레이블. (kind = Caption인 경우에만 적용)
 * 다중 caption인 경우에만 적용 되며, CC 선택 메뉴에서 표시.

 tracks[].default

 * 캡션인 경우에만 사용됨.
 * 캡션 트랙을 바로 표시하려면 true 설정. 기본값이 설정되어 있지 않다면 미디어 재생 시, 자막 미 표시.

이 이외에 광고 스케쥴과 관련된 adschedule 옵션 등을 지원.

 

 

 * Playlist with RSS (RSS를 사용한 플레이리스트)

 

  - RSS파일 내에 재생 목록에 관한 모든 설정 정보를 포함.
  - Playlist 내의 미디어 파일들을 순차적으로 재생.

  - Playlist Formats : ASX, ATOM, M3U, XSPF (JW Player는 RSS만 지원)

jwplayer("myElement").setup({
  image: "http://content.bitsontherun.com/thumbs/i8oQD9zd-640.jpg",
  playlist: "/js/jwplayer/pltest2.rss",
  width: 640,
  height: 270
});

 

  - 기본 XML 형태의 포맷.
  - RSS Feed는 메타 데이터, 미디어 소스, 이미지, 텍스트 트랙 등을 가져오기 위해 RSS Feed 를 사용.
  - JWPlayer RSS namespace, Media RSS namespace, vanilla RSS

<rss version="2.0" xmlns:jwplayer="http://rss.jwpcdn.com/">
<channel>
  <item>
    <title>Sintel Trailer</title>
    <description>Sintel is a fantasy CGI from the Blender Open Movie Project.</description>
    <jwplayer:image>/assets/sintel.jpg</jwplayer:image>
    <jwplayer:source file="/assets/sintel.mp4" />
  </item>
</channel>
</rss>

 


 

 * RSS 파일 태그 정보 

 Inline Playlist

RSS with JWPlayer 

RSS with Media

vanilla RSS

title

title

title

title

description

description

description

description

mediaid

guid

guid

guid

image

jwplayer:image

media:thumbnail@url

-

source.file

jwplayer:source@file

media:content@url

enclosure@url

source.label

jwplayer:source@label

-

-

source.default

jwplayer:source@default

-

-

source.type

jwplayer:source@type

media:content@type

enclosure@type

track.file

jwplayer:track@file

media:subtitle@url

-

track.kind

jwplayer:track@kind

-

-

track.label

jwplayer:track@label

-

-

track.default

jwplayer:track@default

-

-

미디어 포맷에 따른 Mimetypes 테이블

 

 

3. Listbar Block (리스트바)

 * ListBar 는 플레이 리스트를 표시하는 사이드 바를 구성. (스크롤 지원)

 

 

 옵션

설명 

 position

 * 비디오 영상 화면을 기준으로 한 Listbar의 위치.
 * Bottom (디스플레이 아래), right (디스플레이 오른쪽), none (No Listbar)

 size

 * Listbar의 크기 (position이 right 이면 width, position이 bottom 이면  height)
 * 최소 180px 권장.

 layout

 * Listbar에 포함되는 재생 목록 아이템의 레이아웃
 * Basic (Only Title), Extended (Image, Title, Description 포함 – 기본 값)
 * Basic Mode는 Audio Playlist에 적합.

 

※ 참고)
Position이 bottom 모드로 플레이어의 height = 170px, 재생목록 리스트바(listbar) height = 140px 로 설정 시,
영상 디스플레이 영역의 height 는 40px보다 작게 되므로 Audio Mode로 전환됨. (Audio Mode는 영상 디스플레이 영역이 없는 Mode)

※ Listbar 커스터마이징)
- 제공되는 Javascript API와 RSS를 통해 자신만의 Playlist Sidebar 구성 가능.

 

- Playlist Sidebar 커스터마이징 참고 URL -

Customizing the Playlist Sidebar (ListBar) :

http://support.jwplayer.com/customer/portal/articles/1543546-example-making-your-own-playlist-sidebar

 

 * Listbar Sample Code

<div id="myElement"></div>

<script> jwplayer("myElement").setup({
    playlist: "/uploads/myPlaylist.rss",
    width: 720,
    height: 270,
    listbar: {
        position: "right",
        size: 240
    }
});
</script>

 

 

[Video Mode]

 

[Audio Mode]

 

 * Customizing Listbar Block Sample Code

// 커스터마이징 리스트바 컨테이너 영역 (HTML)
<div id="container">&nbsp;</div>
<div id="playlist_custom">&nbsp;</div>

var pct = document.getElementById(“playlist_custom");
var html = pct.innerHTML; 

 

 

// JW Player 기본 로드

jwplayer("container").setup({
  playlist: "http://content.jwplatform.com/feeds/13ShtP5m.rss",
  displaytitle: false,
  width: 680,
  height: 360
});

 

// JW Player가 로드 완료되면 플레이 리스트 영역을 별도로 커스터마이징하여 구성.

jwplayer().onReady(function() {
    var playlist = jwplayer().getPlaylist();

    for (var index=0;index<playlist.length;index++){
        var playindex = index +1;
        html += "<li><span class='dropt' title='"+playlist[index].title+"'><a href='javascript:playThis("+index+")'>
                          <img height='75' width='120' src='" + playlist[index].image + "'</img></br>"+playlist[index].title+"</a>
                          </br><span style='width:500px;'><p>"+playlist[index].description+"</p></span></span></li>“

        pct.innerHTML = html;
    }
});

 

// 커스터마이징된 리스트 바에서 특정 영상 박스를 클릭했을 때, 해당 영상을 재생하기 위한 함수

function playThis(index) {
    jwplayer().playlistItem(index);
}

 

 

[Customized Listbar Image]

 

 

4. Captions Block (자막)

 

  Closed Captioning (CC, 자막)
 * 비디오 및 영상 매체에 추가적인 또는 해석된 정보 텍스트로 보여주기 위한 영역.
 * Subtitling 과 유사한 의미로 사용됨.

 * JW Player에서 Caption Block은 데스크탑 브라우저의 CC의 스타일링을 위해 사용.
 * iOS/Android에서는 FCC규격에 따른 시스템 설정 메뉴에서 동일한 설정을 제공하며, 모든 플레이어에서 동일하게 적용되어 제공.

 

 옵션 (Captions)

 설명 (기본값) 

color 

 텍스트 색상 (ffffff)

 fontsize

 텍스트 크기 (15 points)

 fontFamily

 텍스트 패밀리 (sans)

 fontOpacity

 폰트 투명도 (100)

 backgroundColor

 텍스트 배경 색상 (000000)

 backgroundOpacity

 텍스트 배경 투명도 (75)

 edgeStyle

 텍스트 주변 강조 기능 / dropshadow, raised, depressed, uniform (none)

 windowColor

 캡션 영역의 배경 색상 (000000)

 windowOpacity

 캡션 영역 전체의 투명도 (0)

 

* Sample Code

jwplayer("myElement").setup({
        file: "/assets/sintel.mp4",
        image: "/assets/sintel.jpg",
        tracks: [{
            file: "/assets/captions.vtt"
        }]
    }],
    captions: {
        color: ‘#FF0000’,
        fontSize: 24,
        backgroundOpacity: 50
    }
});

 

 

VTT 파일은 자막 파일 중의 하나로 크롬캐스트에서도 지원.

 

 

 

@Closed Caption 이란?

 

Closed Caption?
폐쇄 캡션 / 닫힌 캡션 (캡션 : 사진, 삽화 등에 붙인 설명)

 

* 자막의 표시 유무를 선택할 수 있음. (Open Caption은 선택이 불가하며 자막이 항상 표시됨)

 

VHS : Open Caption (비디오 자체에 자막을 입혀 인코딩)
DVD, Blueray : Closed Caption

 

 

Closed Caption의 종류
1) Pre-recorded Closed Caption

- 미리 만들어진 자막을 영상에 삽입된 것

- DVD, Blueray, LD 등에서 사용

 

2) Real-time Closed Caption
실시간으로 작성되어 영상에 입혀지는 자막
방송의 실시간 생중계 등에서 사용.

 

 

@자막 파일 만들기

 

* JW Player의 지원 자막 포맷
WebVTT
: 일반 텍스트 포맷 (HTML5 Standard)
SRT : 파일 공유자들 사이에서 가장 인기있는 일반 텍스트 포맷
TTML : 방송사에서 인기있는 XML형태의 포맷 (DFXP 또는 SMPTE-TT로 불림)

 

 

* Web VTT로 자막 만들기
아래와 같은 기본적인 HTML 태그는 지원.
 <b>: bold 타입의 텍스트
 <i>: Italic 텍스트
 <u>: 텍스트에 밑줄
 <font size="123">: 폰트 사이즈 설정
 <font color="ffcc00">: 폰트의 색상 설정

 

 

WebVTT 의 다음 기능은 미지원
 - WebVTT cue setting - line, position, size, etc. 
 - WebVTT cue objects - class, ruby, timestamp, etc.

 

00:00:08.000 --> 00:00:10.000

<b>Nothing</b> is going on.

00:00:10.500 --> 00:00:12.500

<font color="#3333CC">Violet, <i>please</i>!</font>

- I am <font size="20" color="#FF0000"><u>not</u></font> Your babe!

 

* 기타 자막 포맷들

DFXP : Flash Video를 위해 사용되는 일반적인 자막 포맷. W3C에서 개발된 것으로 Timed-text 포맷 형태이며, Distribution Format Exchange Profile 의 약자.
SRT : 가장 범용적인 Subtitle/Caption 파일 포맷. DVD-ripping 소프트웨어 SubRip에서 처음 사용된 Text Format 으로 SubRip Subtitle 을 의미.
이 이외에 CAP, CPT.XML, EBU.STL, QT, RT, SAMI 등 다양한 Caption 및 Subtitle 포맷 등이 존재.


 

 

 

 

 

5. Logo Block (로고)

 

  로고(Logo)
 * 영상 위에 표시되는 클릭 가능한 워터 마크 구현.
 * 투명도를 포함한 24 bit PNG 이미지 권장.

 

 옵션

설명 

logo.file 

 * 로고(Watermark_로 사용할 이미지 파일의 경로
 * JPG, PNG, GIF 이미지 사용 가능하며, 투명도를 가진 24비트 PNG 이미지 권장

 logo.hide

 * 로고를 숨길지 여부 (기본값 : false)
 * False인 경우 항상 표시, true인 경우 컨트롤러의 레이아웃에 따라 자동 숨김.

 logo.link

 * 로고 이미지를 클릭하면 이동할 URL 주소.
 * 설정되어 있지 않으면 동작 없음.

 logo.margin

 * 디스플레이 가장 자리로부터 로고까지의 거리 (기본 8px

 logo.position

 * 로고 표시 위치(모서리) 설정.
 * Top-right(기본값), top-left, bottom-right, bottom-left 중에 선택 가능하며 다른 컨트롤러와의 간섭을 최소화하기 위해 top-right을 권장.

 

 

 

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

Comment +19

  • feriel 2015.01.08 17:17 신고

    안녕하세요 개인홈페이지에 JW플레이어를 설치했는데 사용방법을 몰라 어려웠던 차에 여기 강좌 명령어 보고 배워가고 있습니다
    하다가 도저히 안되서 질문좀 드리겠습니다
    동영상을 플레이하면 PC에서는 꽉찬 화면으로 잘 나오는데 유독 안드로이드 모바일(갤3)에서 재생시에 화면이 조그맣게 나오는데 이걸 반응형으로 설정해도 안되고 도저히 해결방법을 모르겠습니다

    안드로이드 관련 설정 명령어가 더 있는건가요?

  • 2015.01.08 17:24

    비밀댓글입니다

    • 안녕하세요. feriel 님. 제 게시물에 관심을 갖고 봐주셔서 감사합니다.

      일단 답변을 드리자면 데스크탑과 모바일(안드로이드 등)에서의 재생과 관련해서의 설정 작업은 차이는 없지만, 풀스크린 지원에 관련해서는 데스크탑 및 모바일에 대해 조금 차이가 있습니다.

      특히 안드로이드 기반에서는 JWPlayer를 어떤 모드로 사용하느냐에 따라 다른데, Flash Mode로 사용하는 경우 브라우저 내에서 영상이 바로 재생되며, HTML5 Mode인 경우에 FullScreen을 지원합니다. (또한 HTML5라 하더라도 FLV 파일인 경우, HTML5 재생을 지원하지 않지만, 알려주신 사이트의 영상 파일은 MP4이니 미디어 포맷 문제는 없을 것 같습니다.)

      아마 갤럭시S3에서의 브라우저에 Flash가 설치되어 있어 Flash Mode로 기본 재생되고 있거나,
      HTML5 재생 지원이 안되는 것일 수 있습니다. (그런데 찾아보니, 갤럭시S3는 HTML5를 지원하는 것 같습니다.)

      혹시 모르니 다음과 같이 재생 우선 순위 모드를 설정해 보시기 바랍니다.

      jwplayer("myElement").setup({
      file: "filepath.mp4",
      image: "imagepath.jpg",
      width: 100%,
      aspectratio: "16:9"
      modes: [
      { type: "html5" },
      { type: "flash" },
      { type: "download" }
      ]
      });

      위와 같이 재생 모드 우선 순위를 지정해도 FullScreen Mode로 나오지 않는다면 Flash Mode 기반으로 재생되는 것으로 보입니다.

      그 외의 이유로는 특정 스마트폰의 Native Player의 영향을 받는다라고 밖에 볼 수 없을 것 같습니다.
      아이폰 유저라 안드로이드폰이 없는지라, 내일 안드로이폰을 구해서 한 번 재생 테스트 해보겠습니다.^^ (참고로 아이폰은 FullScreen으로 잘 재생됩니다.)

      관련 QA : http://support.jwplayer.com/customer/portal/questions/6062845-android-device-browser-native-video-player
      플랫폼별 FullScreen 지원 브라우저 참조 : http://www.jwplayer.com/html5/fullscreen/

  • feriel 2015.01.09 08:24 신고

    글보고 아이폰으로 해보니깐 퀵타임으로 재생되니 풀스크린이 되는데
    안드로이드 모바일 웹브라우저로 재생하니 여전히 같은 증상이네요 크롬을 깔아서 해봐도 같고
    jw문제가 아니라 안드로이드 문제일까요?

    • 오늘 G2와 G3로 해보았는데, FullScreen Mode로 재생은 되나, 말씀하신대로 화면이 작게 나오더군요. Inline Mode 역시 작은 화면으로 재생됩니다. (회사에서 실제 코드 구현하면서까지 테스트할 시간적 여유가 되지 않았습니다. ㅠ.ㅠ)

      혹시 아닐 수도 있지만, 단지 화면이 작게 나오는 것이라면 stretching 옵션을 한 번 적용해보면 어떨지 궁금합니다.
      stretching : exactfit

      stretching 옵션
      * uniform : 원래 영상의 종횡비(Aspect Ratio) 유지하면서 JW Player 영역에 맞춤 (Black Bar)
      * exactfit : 원래 영상의 종횡비를 무시하고 JW Player 영역에 맞춤.
      * fill : 원래의 영상의 종횡비를 유지하면서 JW Plaer 화면 영역을 가득 채움 (Stretch + Zoom)
      * none : 원래의 영상 사이즈를 그대로 출력 (Black borders)

      사실 위의 stretching은 기기별로 다른 양상을 보이는 문제를 해결하는 것에 적합한 해결법은 아니나, 혹시나 해서 말씀드렸습니다.

      제 개인적인 생각에는 아이폰이나 안드로이드같은 스마트폰의 JWPlayer 영상 재생은 Native Player의 영향을 받기 때문에 기기에 따라서 다른 양상을 보이는 것 같습니다.
      그리고 JW Player Support의 Fullscrenn 관련 QA 내용들을 보면 기기의 영향을 받는 것으로 보입니다.

      관련된 QA 이슈들 URL : http://support.jwplayer.com/customer/portal/articles/search?page=3&q=android+fullscreen

  • feriel 2015.01.10 13:55 신고

    친절한 답변 감사합니다
    말씀 해주신 방법으로 해봤는데 여전히 작게 나오네요
    일단 이 문제는 재껴놔야 겠네요

    바쁘신데 테스트 해주시고 여러가지 알려주셔서 감사드립니다 새해 복 많이 받으세요~~

    • 도움이 많이 되지 못한 것 같아 아쉽습니다.
      혹시라도 관련해서 무언가 도움이 될만한 정보가 생기면 알려드리겠습니다.

      제 블로그 방문해주셔서 감사드리고 feriel 님도 새해복 많이 받으세요.

  • 2015.01.29 11:42 신고

    이거 안드로이드에서 재생이 안돼요 어도비플레이어 깔았는데도안돼요 홈페이지란에 블로그주소적어놨으니까 답변좀 해주세요 블로그와서

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

      혹시 스트리밍 방식으로 영상을 제공하고 계신건 아니신지요? JW Player는 안드로이드 환경에서 RTMP나 HLS 등의 스트리밍 방식을 지원하지 않습니다.
      아니면 혹시 비디오 영상이 FLV 파일은 아니신지요? (FLV 포맷 파일 또한 안드로이드 에서 지원하지 않습니다.)

      건 님의 블로그를 방문하였는데, 영상 모두 다음TV팟이거나 네이버 플레이어를 사용하고 있는 것 같은데요. 제가 혹시 못찾은걸까요?^^ JW Player로 구동하고 계신 페이지나 소스가 어디에 있는지 알려주시면 한 번 확인해 보도록 하겠습니다.^^

  • sbstoo 2015.04.02 17:26 신고

    jw player에서 따로 소스상으로 디인터레이스를 on off로 설정이 가능할까요?

    • 안녕하세요 sbstoo 님. 답변이 늦었습니다.
      요즘 회사에서 일이 많다보니, 댓글 확인을 못할 때가 많네요. ㅠ.ㅠ

      일단 현재 버전(6)까지의 JW Player에서는 자체적으로 deinterlacing 해주는 기능은 없는 것 같습니다.
      JW Player는 웹 기반의 플레이어의 특성상 Flash 또는 HTML을 기반으로 영상을 제어해주는 역할로써 사용되기 때문에 재생 될 영상 프레임 수준까지 가공하거나 변형하여 재생하지 못합니다.
      (그런데 HTML5 에서는 media 재생과 관련한 옵션이 있는 것 같네요. http://www.w3schools.com/tags/att_area_media.asp, media 태그의 scan 속성을 progressive 또는 interlace로 지정할 수 있습니다. JWPlayer가 완전히 HTML5 기반으로 넘어오게 되면 지원되지 않을까 싶습니다.)

      현재는 미디어 서버에 자체 영상을 보유하고 계시다면 영상 업로드 시에 사전에 deinterlacing 작업을 해주셔야 할 것으로 보입니다.

      일반 모니터가 그렇듯이 JW Player에서는 Progressive 방식의 영상만 제대로 출력되며,JW Player 가이드에서도 그렇게 안내하고 있습니다.
      http://support.jwplayer.com/customer/portal/articles/1433634-preparing-videos-for-upload

      저도 실질적으로 문의 주신 내용에 대해 실제 적용해본 것은 아니고, 지식도 많은 편은 아니로 정확하지 않을 수도 있는점 양해 부탁드립니다.^^ 좋은 주말 되세요~

  • 매직 2015.09.28 10:02 신고

    안녕하세요.. 도저히 해결이 안되어 문의 드려봅니다.
    jwplayer 5, jwplayer 6 버전까지 사용해봤는데요. jwplayer 6 에서는 랜덤재생이 지원되지 않나요?
    반복재생, 자동재생은 잘 되는데 랜덤재생 기능인 shuffle: 'true'로 설정해도 랜덤재생이 지원되지 않네요.

    그러고 보니 위에 Basic Options (기본 옵션들)에 repeat 는 보이는데 shuffle 은 보이지 않네요.
    혹시 플레이리스트에 담긴 리스트를 랜덤재생 하는 방법을 알고 있는지요? ㅜㅜ

    • 안녕하세요. 매직님!
      답변이 너무 늦었습니다.^^

      저도 JWPlayer를 한지 오래되어서 예전 자료를 다시 찾아보았는데, shuffle에 관한 내용이 없네요. ㅎㅎㅎ

      JWPlayer도 최근에 7버전으로 업그레이드되면서 6에 대한 support도 많이 줄어든 것 같습니다.

      일단 jwplayer7에서 shuffle 지원에 대한 문의와 공식 답변이 있는데요. 답변을 보니 7에서는 아직 지원하지 않고 있다고 하는 것 보니, 이전 부터 shuffle 기능이 지원되지 않았던 것 같습니다.
      http://support.jwplayer.com/customer/portal/questions/13064195-jwp-7-now-supports-shuffle-function-

      아마 직접 구현하셔야 될 것 같은데, 위의 support 댓글 가장 마지막에 shuffle 기능을 구현한 jwplayer 라이브러리(listy.js)에 대한 소개(링크)가 있는데, 이를 이용하셔도 될 것 같습니다.
      Listy for JW Player : http://dev.powered-by-haiku.co.uk/solutions/listy/index.htm

      위의 라이브러리에서는 Shuffle 기능을 지원한다고 되어 있습니다. (Other features 부분에 명시되어 있음)

      글 쓰면서 게시물 몇개를 더 읽어 보았는데, Shuffle 기능이 JW Player 6에서는 공식적으로 지원하는 기능이 아닌 것으로 보입니다.
      http://support.jwplayer.com/customer/portal/questions/8013292-what-s-the-problem-shuffle-mode-doesn-t-work-

      도움이 되셨기를 바랍니다^^
      좋은 밤 되세요~

  • 안녕하세요 개발자님. PC와 모바일에서보여지는 화면 크기때문에 고민하다가 찾다와서 들려봅니다.
    저 같은 경우 다음과 같이 해서 사용을 하고 있습니다.

    <script src="/jwplayer/jwplayer.js"></script>
    <div id="mediaplayer2"></div>
    <script>
    jwplayer("mediaplayer2").setup({
    primary: "flash",
    width: "100%",
    height: 406,
    aspectratio: "16:9",
    playlist: [{
    image: "/mov/logo.png",
    sources: [
    { file: "rtmp://주소/mp4/mp4:lec/클립.mp4" },
    { file: "http://주소/mp4/lec/클립.mp4" }
    ]
    }]
    });
    </script>

    PC에서 우선적으로 rtmp로 플래시 재생시키고
    모바일에선 http로 html5로 재생하도록 햇습니다.
    그래서 스트리밍에는 문제가 없고요. 다만 사이즈 문제로 여쭤보겠습니다.
    영상자체를 만들때 사이즈를 720 406으로 인코딩 하기때문에
    PC에서 볼때는 물론 720(100%니까)*406으로 보기 편하게 나오며,
    모바일에서 볼때는 비율이 16:9로 맞으므로 세로모드로 봐도 1:9비율로 가로로 봐도 꽉차게 잘 보여지는 편입니다.

    하지만 영상을 이렇게 1024*768로 만들거나
    700*570 등으로 임의 사이즈 비율로 맞춰서 만들었을때
    위와 같이 해버리면

    PC에서는 좌우 여백이 많이 남고,
    모바일에서는 세로모드일경우 아래쪽으로 길게, 즉 위아래 여백이 많이 남게 보여집니다.

    그래서 PC에서는 내가원하는 사이즈로 700*570 으로 보여지고,
    모바일에서는 16:9로 보여지도록 하려면

    어떻게 해줘야할까요.
    요즘은 플래시를 모바일 브라우저에서 지원을 안하고 기본 HTML5로만 동작하는것으로 압니다.

    • 안녕하세요. HappyChild 님.
      블로그를 방문해 주셔서 감사합니다.^^ 너무 바쁘다보니, 댓글 답변을 바로 바로 확인하지 못하였네요.ㅠ.ㅠ

      JWPlayer에 자체적으로 데스크탑과 모바일을 구분하여 사이즈를 조절해 주는 기능이 있는지는 모르겠습니다.

      하지만, 굳이 JWPlayer를 이용하지 않더라도, 브라우저의 userAgent값을 체크하여 페이지가 열린 브라우저 환경이 PC 데스크탑인지, 스마트폰인지 알 수 있습니다.

      참고 사이트 : http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser

      브라우저가 스마트폰(및 아이패드 등)의 브라우저 인지 체크하는 코드입니다.

      이 값을 토대로 JWPlayer 의 파라메터 (너비나 높이, aspectratio 등)의 값을 세팅하면 원하시는 대로 구현하실 수 있지 않을까 생각됩니다.

      그리고 모바일 브라우저(특히 아이폰)에서는 플래시를 제대로 지원하지 않기 때문에 범용적으로 사용하시려면 HTML5로 구현하시는 것이 편합니다. JWPlayer도 모바일 환경에서는 HTML5 기반으로 재생될 겁니다.

      답변이 도움이 되었는지 모르겠습니다.^^

      좋은 밤 되세요~

  • 2016.09.05 00:48

    비밀댓글입니다

  • 워드프레스블로거 2016.11.28 03:43

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

  • cosmon 2016.12.29 20:55

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

티스토리 툴바