JWPlayer 강좌 (3) - JW Player 사용하기

JW Player (3)부터는 JW Player의 기본적인 코드 및 지원하는 모든 구성 옵션에 관해 설명합니다.

 

앞으로 계속 진행될 JW Player 강좌에서 예시로 제시되는 소스 코드 및 캡쳐 이미지는 설명에 도움을 주기 위해 실제 JW Player 공식 웹사이트에서 예시로 가져온 것들이 많습니다.

 

 

2.1. JW Player - Introductions

 

* 플레이어 레이아웃 구성 및 동작 제어를 위해 상당히 세밀한 구성 옵션을 제공.

* 일부 옵션은 embed code 에 직접 구현하기도 하고, 일부 옵션(Advanced Options)은 구성 옵션 블록(Config Options Blocks)로 그룹핑 하여 구현함.

 

1. embed code 에 직접 구현
 -> (e.g. width, file… )

 

2. Advanced Options 들은 구성 옵션 블록(Config Options Blocks)로 그룹핑 하여 구현
 -> (e.g. listbar, advertising …)

 

jwplayer("myElement").setup({

    file: "http://example.com/myVideo.mp4", // embed code

    height: 360,

    advertising: { // config options block

        client: "vast",

        tag: "http://adserver.com/vastTag.xml"

    },

    width: 640

});

작성 문법은 JavaScript Object Notation(JSON)을 따름.

 

 

2.2. Basic Player

 * 기본 적인 형태의 플레이어 구현

 

<script type="text/javascript">
jwplayer("myElement").setup({
    file: "http://content.jwplatform.com/videos/HkauGhRi-640.mp4",
    image: "http://www.jwplayer.com/wp-content/uploads/trends.jpg",
    height: 380,
    width: 640
});
</script>