JWPlayer 강좌 (5) - JW Player의 다양한 옵션들 (2)

디케DIKE 운영 0 2461 2017.12.25 19:28

http://ooz.co.kr/128?category=818548 + 586

이번 포스팅에서는 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)

- 참고 URL -

Branding Your Player : http://support.jwplayer.com/customer/portal/articles/1406865-branding-your-player
Watermark : http://terms.naver.com/entry.nhn?docId=1219769&cid=40942&categoryId=32828

3. Related Block (관련 영상)

* 연관 비디오 및 트랙 표시

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

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

옵션	설명 (기본값)
file (required)	* 연관 미디어의 RSS 파일 경로 (XML)
onclick	* 연관 미디어의 썸네일을 클릭하였을 때, 이동할 페이지 URL / 재생할 비디오 경로
oncomplete	* 영상 재생 종료 후, 연관 비디오 표시 여부
heading	* 연관 영상 표시해주는 Grid 상단의 텍스트
dimensions	* 연관 미디어의 개별 썸네일 이미지 크기 (기본값 140 x 80 px) * 개별 썸네일 간에는 항상 10px 여유 공간

- 참고 URL -

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

- 참고 URL -

Video Ads for JWPlayer : http://support.jwplayer.com/customer/portal/topics/605644-video-ads/articles

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]