LDTV.KR
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 등)
<script>
jwplayer("myElement").setup({
file: "/uploads/myVideo.mp4",
width: "640",
height: "360"
});
</script>
[화면 사이즈가 고정된 형태의 JW Player]
<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를 통해 구현)
Responsive JW Player : http://support.jwplayer.com/customer/portal/articles/1406644-making-jw-player-responsive
출처: http://ooz.co.kr/163?category=818548 [이러쿵저러쿵]
