본문 바로가기

개발&컴퓨터/개발강좌

JWPlayer 강좌 (부록) - Responsive JW Player [4/4]

반응형

부록 4번째(마지막) 이슈입니다.

 

* (1) HD Quality Toggling

* (2) Cross Domain Problem

* (3) JW Player Skins

* (4) Responsive JW Player (반응형 JW Player)

 

 

4. Responsive JW Player


 * 데스크탑 및 모바일 디바이스 화면에 맞게 JW Player의 디스플레이 영역을 조정(Resizing).

 * 반응형의 플레이어로 설정
  1) width 속성 값을 고정 픽셀 값이 아닌 비율로 설정(보통 100%)
  2) height 속성 값을 설정하지 않고, 영상의 aspectratio(종횡비) 속성 값 설정. (height값은 무시됨)
     (e.g. 16:9(와이드) 24:10, 4:3 등)
 

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

 

<script>

jwplayer("myElement").setup({
    file: "/uploads/myVideo.mp4",
    width: "640",
    height: "360"
});

</script>

[화면 사이즈가 고정된 형태의 JW Player]

 

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

 

<script>
jwplayer("myElement").setup({
    file: "/uploads/myVideo.mp4",
    image: "/uploads/myPoster.jpg",
    width: "100%",
    aspectratio: "16:9“
});
</script>

[화면 사이즈가 유동적인 형태의 JW Player]

 

 * width: "100%" : 화면 영역을 JW Player가 할당된 공간 또는 화면 사이즈에 맞추어 유동적으로 변경됨.

 * aspectratio: "16:9" : 화면의 [가로 X 세로] 사이즈가 16:9 비율로 자동 조정됨. width 값이 유동적으로 변함에 따라 height 값도 이 비율에 맞게 조정됨.

 

 참고) width: "100%" 와 aspectratio 옵션이 적용된 경우, height 옵션은 값을 지정하더라도 무시됨.

 

 * iframe 을 통해 JW Player가 포함된 페이지를 로드하는 형태로 구현하는 경우도 반응형 상태를 유지하도록 지원.
   (Wrapper Element(div)와 CSS를 통해 구현)

 

 

반응형