이러쿵저러쿵


이번 포스팅에서는 JW Player에서 지원되는 부가적인 옵션을 계속해서 좀 더 알아보겠습니다.

그런데 이번 포스팅에서 설명하는 옵션들은 실질적으로 영상 재생이나 제어와 직접적으로 관련된 부분이 아닌 것들이라 이전 것들보다는 조금 간략하게 설명하고 있습니다.

 

만약 좀 더 자세하게 알기 원하거나 궁금하신 것이 있으시면 댓글 달아주세요.

아니면 강좌 내용과 관련된 추가 정보를 얻을 수 있는 것들은 그때 마다 관련 링크를 함께 달아놓았으니, 해당 페이지를 방문하시면 좀 더 많은 정보를 얻으실 수 있습니다.^^

 

     [부가 옵션들]

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

 

1. Google Analytics Block & Adobe SiteCatalyst

1.1) Google Analytics 
   * Google 분석도구의 내장된 통합 기능을 구성. (Google Analytics integration)
   * Google Analytics Javascript library 사용.

 

   * JW Player 를 통해 특정 미디어에 대한  세밀한 사용자의 접근, 영상 재생에 대한 분석 가능.


   * 다음에 대해 분석 도구 활용 가능.
     > Video Plays, Video Completes, Buffer Events, Idle Events, Pause Events, Resume Events, Seek Events

 1.2) Adobe SiteCatalyst
   * built-in integration Adobe SiteCatalyst 지원.
      Adobe SiteCatalyst JavaScript library 사용.

 

- 참고 URL -

* 구글 Analytics 

Integration with Google Analytics : http://support.jwplayer.com/customer/portal/articles/1417179-integration-with-google-analytics

 

* 어도비 Sitecatalyst

Integration with Adobe Sitecatalyst : http://support.jwplayer.com/customer/portal/articles/1417185-integrating-adobe-sitecatalyst

 

 

 

2. Sharing Block (영상 공유 기능)

* 소셜 페이지 공유(Social Sharing)를 위한 옵션

 * 미디어에 대한 embed code, video link 복사 기능을 제공하며, facebook, twitter, email 등에 공유 지원.

 * Playlist 를 사용하는 경우, 개별 미디어(or 트랙)마다 다른 sharing link를 설정할 수 있음.
    (개별 리스트의 mediaid 값을 sharing 부분의 MEDIAID로 대체.)

jwplayer("container").setup({
    playlist: [{
       file: "/videos/12345.mp4",
       mediaid: "12345"
    },{
       file: "/videos/67890.mp4",
       mediaid: "67890"
    }],
    sharing: {
      code: encodeURI("<iframe src='http://example.com/embed/MEDIAID.html' />"),
      link: "
http://example.com/page/MEDIAID/"
    }
});


 

 

 

 

 * 좌측 상단에 공유 버튼 표시

 

 

 * 버튼 클릭 시, Sharing Layer가 표시되며, Sharing Layer는 Heading (Title), Embed code, Video link, 공유 버튼들로 구성.

 * Share Video 모드로 전환되는 경우, 미디어 재생은 자동으로 일시 정지 상태로 전환.

 * 공유 모드 상태에서 화면 오버레이 영역 아무 곳을 클릭하면 다시 재생 모드로 전환.

 

Link : 비디오 공유 링크 URL
Code : 페이지에 삽입을 위한 embed code
Heading : 공유 화면 상단에 표시되는 텍스트 (Default : Share Video)

 

 

 

3. Related Block (관련 영상)

 * 연관 비디오 및 트랙 표시

 

 

 * 좌측 상단에 연관 미디어(비디오)를 표시하는 버튼 배치

 

 * 영상 재생이 종료된 후, 표시

 

 

 옵션

 설명 (기본값) 

 file (required)

 * 연관 미디어의 RSS 파일 경로 (XML)

 onclick

 * 연관 미디어의 썸네일을 클릭하였을 때, 이동할 페이지 URL / 재생할 비디오 경로

 oncomplete

 * 영상 재생 종료 후, 연관 비디오 표시 여부

 heading

 * 연관 영상 표시해주는 Grid 상단의 텍스트

 dimensions

 * 연관 미디어의 개별 썸네일 이미지 크기 (기본값 140 x 80 px)
 * 개별 썸네일 간에는 항상 10px 여유 공간

 

 

 

4. Advertising Block (광고 연동)

 * JW Player 의 광고 기능을 구성.

 

 * 지원 광고 타입
   - vast (for IAB VAST/VPAID/VMAP ads)
   - googima (for Google Interactive Media Ads).

 

 * 광고 형태
   - Preroll (영상 시작전 광고)
   - Banner (하단 자막 광고)

 

* 광고 건너 뛰기, 중간 영상 광고, 광고 클릭시 페이지 이동 등 구현 가능

* 다양한 광고 포맷 지원.
* 크롬 캐스트 지원

 

* Configuration Options
 - advertising.client : 광고 시스템 선택
                         vast(for IAB VAST/VPAID/VMAP ads) 또는 googima (for Google Interactive Media Ads) 중 선택

 - advertising.tag / advertising.schedule / advertising.admessage / advertising.companiondiv / advertising.skipoffset

 

 

 

5. Other Options (다른 옵션들)

 

옵션 

설명 

 abouttext

 마우스 우측 버튼 클릭 시 표시되는 메뉴의 텍스트.

 aboutlink

 마우스 우측 버튼 클릭 시 표시되는 링크의 URL.

 displaytitle

 디스플레이 화면 가운데 표시되는 Play Icon 내에 표시되는 미디어 제목.

 fallback

 HTML5와 Flash 미 지원시, 제공되는 다운로드 링크 정보. Flase로 설정 시, fallback 기능 비활성화.

 flashplayer

 기본으로 jwplayer.js 폴더에 있는 jwplayer.flash.swf 를 로드하지만, 다른 경로에 있는 플래시 플레이어를 사용할 때, 플래시 파일의 경로.

 html5player

 기본으로 jwplayer.js 폴더에 있는 jwplayer.html5.js 를 로드하지만, 다른 경로에 있는 HTML5 JS 파일을 사용할 떄, 해당 파일의 경로.

 startparam

 Flash 모드에서 FLV 또는 MP4 파일의 아직 다운로드되지 않는 부분을 검색하기 위한 QueryString Parameter값

 stagevideo

 False 로 설정 시, GPU-accelerated image compositing 비활성화 (Flash rendering mode). 즉, 플래시 렌더링 모드에서 GPU 가속 이미지를 사용하지 않으려면이 false로 설정

 stretching

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 이미지와 영상을 디스플레이에 맞게 조절하는 방법

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

 

 

 [uniform]

 [exactfit]

 

 [fill]

 

[none]

 

 

 

 

 

 

 

 

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


Comment +16

  • 손님 2015.01.25 11:15 신고

    현재 jw플레이어를 사이트에서 사용중인데요
    이게 원래 mms:// 프로토콜로 된 mp3파일은 못 읽나요?
    스트리밍 서버 (mms:// 형식) 에 mp3파일을 올려놓고 jwplayer로 구동하면 재생이 안되거든요
    경로는 맞습니다. 절대경로 복사해서 팟플레이어에서 url열기로 열면 음악 재생도 되고요

    뭐가 문제일까요?ㅠㅠ
    원하시면 주소 링크해 드리죠

    • 안녕하세요. 제 블로그에 관심을 갖고 방문해 주셔서 감사합니다.^^

      혹시 mms 스트리밍이 다른 파일들은 정상적으로 재생되는데, mp3 파일만 재생이 안되는 것인지요? (만약 그렇다면 링크 부탁드립니다.)

      mms 프로토콜을 사용해서 JW Player를 구동시켜 본적이 없어서 JWPlayer의 Support에서 자료를 조금 찾아보았는데, 일단 현재는 mms 프로토콜 스트리밍을 지원하지 않는 것 같습니다.

      과거에는 mms 스트리밍을 위해 윈도우 실버라이트 기반의 JW WMV Player 를 별도로 제공했던 것으로 보이나, 관련 코드나 자료를 확인해 보려해도 모든 링크가 깨져 있습니다.

      관련된 최근 Q&A 이슈가 거의 없어서 찾기 힘들었는데, 가장 최근의 이슈를 보면 mms 프로토콜을 통한 스트리밍을 지원하지 않는다고 답변하고 있습니다. RTMP 또는 HLS를 사용하라고 합니다..
      참고URL : http://support.jwplayer.com/customer/portal/questions/11040561-mms-file-playing

  • 손님 2015.01.26 06:57 신고

    제가 mp3만 테스트 해봤는데 wmv를 테스트 해보니 이건 아예 안되네요.
    mms자체가 jw플레이어에서 막힌거 같아요.ㅠ.ㅠ
    혹시 그럼 jw플레이어 말고 다른 웹 mp3플레이어는 없을까요?

    저는 심플한거면 되는데 플레이버튼, 탐색바정도.....
    구매할수 있는 유료버전도 괜찮고....

    • 제가 집에와서 댓글들을 확인 하다 보니 답변이 많이 늦었습니다.^^;

      1) 닷넷을 사용하신 다면 미디어 태그를 이용하여 간단히 MMS 플레이어를 구성할 수 있다고 합니다.

      <asp:Media ID="Media1" runat="server" Height="232px" MediaUrl="mms://111.111.111.111/test/sample.wmv" Width="365px" AutoPlay="True" MediaSkin="Basic"> </asp:Media>

      Silverlight MMS Player 참고 :http://kevinstory.tistory.com/18
      Microsoft ASP.NET Future Download : http://www.microsoft.com/en-us/download/details.aspx?id=21155
      Video Streaming : http://www.code.colostate.edu/video-streaming.aspx


      2) 일단 Flash 계열은 지원 안하기 때문에 있으며, HTML5로 구현하는 방법도 있는 것 같습니다. HTML5 video, audio 태그를 통해서도 구현해보는 것도 괜찮을 것 같습니다.
      * http://webdir.tistory.com/95 (단, HTML5를 지원하는 브라우저이어야 하겠죠? 요즘 최신 브라우저들은 대부분 지원합니다.)

      * FF와 IE 모두 구동되는 http://stackoverflow.com/questions/164/embedding-windows-media-player-for-all-browsers

      3) HTML의 object 태그를 사용해서 구현할 수도 있는데, 이는 외부 Media Player를 호출하여 재생됩니다. Media 플레이어를 웹 브라우저에 내장 시켜 재생하는 방법도 있다고 하나, 이 경우는 IE에서만 정상 동작하는 것 같습니다.
      * http://stackoverflow.com/questions/9086838/how-to-stream-mms-protocol-radio-on-your-website?lq=1

      MS의 스트리밍 프로토콜이어서 그런지, 다른 오픈소스 계열에서는 거의 지원하지 못하는 것(안하는 것!?) 같고, 닷넷 기반에서 지원하는 것 같습니다. 모든 자료들을 확인해 본 것은 아니라, 이 외에 MMS를 지원하는 다른 웹기반 플레이어가 더 있을지도 모릅니다.^^

      제가 첨부한 URL들은 MMS 스트리밍을 하기 위해 찾아본 페이지 들중에서 도움이 될만한 것들을 추린 것들입니다. 각 페이지에서 설명하는 MMS Streaming의 실제 동작 여부는 체크해보지 못하였습니다.

  • 2015.01.27 07:26

    비밀댓글입니다

    • 네.^^ 감사합니다.

      사용자 입장에서는 MS 제품들이 괜찮은 것도 많고, 사용하기 편한것도 많지만, 독단적으로 자신들만의 표준을 잡기도 하고, 오픈 소스와는 거리가 먼 상용 소프트웨어 개발 업체이기 때문에 오픈 소스와 같은 다양하고, 호환성 높은 지원은 어려운 편인 것 같습니다.

      JW Player를 꼭 이용하시기 원하시면 HLS나 RTMP 스트리밍도 한 번 고려해보세요~
      그리고 좋은 웹 재생 서비스 만드시기 바랍니다.^^

  • 손님 2015.02.04 07:56 신고

    예 감사합니다.
    근데 혹시 하나의 페이지에서 여러개의 jwplayer를 띄우는 경우 페이지 로딩이 느려지던데
    로딩속도 개선의 방법은 없나요?

    저는 mp3를 플레이어로 재생하는데요.
    각 페이지마다 10개가 넘는 플레이어를 하나의 페이지에서 띄울때도 있습니다.

    이럴때 로딩이 정말 느린데 방법은 없나요?

    그냥 목록만 표시했다가 클릭하면 새창에서 플레이어를 띄워야 할지...

    • 안녕하세요^^ 손님(님) ㅎㅎ

      혹시 어떤 브라우저와 어떤 디바이스에서 확인하신 것인지 궁금합니다.

      저도 궁금하여 10개 정도의 MP4와 MP3를 로드하는 각각의 JW Player 객체를 하나의 페이지에 만들어 보았는데, 페이지 로드라던지, 개별 플레이어 재생에 느려짐을 느끼지는 못하였습니다.
      (IE11, Chrome, Safari, FF에서 모두 확인)

      모든 Player의 파일 전체를 Preloading 하는 것이 아니기 때문에 크게 느려질 이유는 없고, 동시 재생도 큰 문제되지는 않는 것 같습니다. (클라이언트 PC의 메모리 사용량이 조금 튀기는 하지만..)
      그리고 설령 MP3 파일 정도 용량이라면 전체 프리로딩 한다고 해서 우라니라 인터넷 환경에서 크게 문제될 수준도 아니구요.^^

      혹시 IE 8이하 버전을 사용하시는 것은 아니신지요? (IE8 이하는 Javascript 파싱 엔진 성능이 상당히 떨어져서 JQuery등의 라이브러리 로드에 상당한 시간이 걸립니다.)

      괜찮으시다면 페이지 링크 한 번 알려주세요~.^^

  • 차니 2015.03.18 20:53 신고

    광고 서버 연동은 어떻게 하는지요?
    jwplayer ads 버전이 있어야하고 광고 서버의 광고 링크를 넣으면 되는 것인가요?
    만일 preroll이나 배너 광고를 위해 구글 광고 서버를 이용한다면
    구글 애드센스와 연동이 가능한지요?
    그리고 jwplayer ads 버전은 가격이 책정 되어 있지 않고 연락하라고 되어 있는데

    어떻게 라이센스를 받고 그리고 가격이 어느 정도인지 궁금합니다.
    스트림 서비스 전에 고아고를 하고 싶은데..

    아니면 자체 광고 동영상을 vod 서비스 전에 할 수 있는 방법이 있을까요?
    smil은 모바일(http)에서는 안먹어서요...

    rtmp,http(ios, android)로 wowza에서 서비스 중입니다.

    • 안녕하세요. 차니님. 블로그를 방문해 주셔서 감사합니다.
      답변이 좀 늦었습니다.^^

      죄송합니다만 저도 JW Player의 재생과 제어에 관하여 공부하고, 사용해 보았지만, 광고 연동 부분에 대해서는 실질적인 구현 및 진행 절차에 대해서는 알지 못하고 있습니다.

      광고 연동과 관련한 기술적인 부분에 대해서는 아래 URL에서 도움을 받으실 수 있습니다.
      * http://support.jwplayer.com/customer/portal/topics/605644-video-ads/articles
      * http://support.jwplayer.com/customer/portal/articles/1434510-getting-started-with-jw-ads

      실질적으로 광고용 버전에 대한 정보(가격, 라이센스 등)는 직접 문의하여 정보를 획득하시는게 가장 빠르고 정확할 것 같습니다.

      많은 도움이 되지 못하여 죄송합니다.
      환절기 감기 주의하시고, 좋은 주말 되시길 바랍니다.^^

  • jw플레이어 초보 2015.08.12 09:28 신고

    안녕하세요 이번에 JWPlayer를 추가하여 mp4파일을 재생하려고 하는데 파일 용량이 270MB정도 되다보니 크롬에서는 재생버튼을 누름과 동시에 재생이 시작하며 동시에 다운로드를 받는 반면 Explorer에서는 다운로드를 전체 다 받고 재생을 하는건지 재생버튼을 누르고 재생까지의 시간이 오래 걸리는 문제가 있습니다. 혹시 옵션값이나 다른 부분을 설정하여 크롬에서의 동작처럼 재생은 먼저 시작하고 다운로드도 동시에 하는 것이 있을까요?

    • 안녕하세요. jw플레이어 초보님
      블로그를 방문해 주셔서 감사합니다.
      답변이 많이 늦었습니다. ㅠ.ㅠ

      저도 JW Player 에 대해 계속 공부를 하고 있지 않아서 바로 답변은 드리기 어렵고 찾아보아야 할 것 같습니다.
      크롬과 IE에서의 재생 상태가 다르다면 브라우저의 특성에 따른 문제일 것 으로 보이는데요, 브라우저에 따른 옵션을 JW Player가 제공하는 것 같지는 않습니다.

      혹시 말씀하신 mp4 재생을 저도 한 번 접근해보고 싶은데요, 외부에 공개된 파일인지요. 제가 한 번 재생해보고, 실제 어떻게 다른지 보면 좀 더 도움이 될만한 조언을 드릴 수도 있을 것 같습니다.

      좋은 한 주 시작하세요~

    • mp4의 경우 다운로드 방식이 아닌 스트리밍이 되는 형태로 만드셔야합니다.
      mp4에 hint를 주면 구간 이동이 되는 스트리밍 형태로 변형이되고요.
      hint를 주는 툴은 mp4box라고 합니다.

      gui를 제공을 하고요.

      저는 번거로워서 배치파일로 만들어진 자료를 가지고 이용을 하고 있습니다.

      자료 올려두니 참고해서 해보시기 바랍니다.
      http://one2.kr/index.php?document_srl=2965

  • 궁금해요 2015.12.31 11:12 신고

    안녕하세요. 블로그 많이 보고 있습니다.~!
    읽어보다가 하나 궁금한점이 있어 글 남깁니다.

    관련영상에 섬네일 이미지 크기가 기본 140x80 인데
    크기를 좀 조정하고 싶은데요. dimensions 이옵션에 대해서 어떻게 사용하는지 알수 있을까요?

    아무리 뒤져봐도 관련영상에 대한 섬네일 크기나 위치를 조정하는
    글이 안보입니다..ㅠㅠ

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

      요즘 블로그를 많이 못하고 있어서 답변이 좀 늦네요. ㅎㅎㅎ
      JW Player를 혹시 어떤 버전을 사용하고 계신지 궁금합니다. 제가 포스팅한 JW Player 6의 경우, 썸네일에 dimensions라는 속성이 있기는 한데, 실제 이를 변경하거나 제어할 수는 없다고 합니다.

      관련 Q&A인데 https://support.jwplayer.com/customer/portal/questions/6243460-re-sizing-the-thumbnail-size-on-player

      썸네일의 크기 등을 변경할 수 있는 방법은 6 버전에서는 없다고 답변하였고, 곧 업데이트 될 예정이라고 하였는데요. (2014년도 게시물)

      그래서 업데이트 되지 않은 6 버전을 사용하고 계신다면 동일한 이슈가 있지 않을까 생각됩니다. 현재 7버전 이상이 나온 것으로 아는데, 혹시 해당 버전에서는 제어가 가능하지 않을까 싶습니다.^^

  • 2016.10.19 15:34

    비밀댓글입니다

티스토리 툴바