[JWPlayer] 구간 반복 방법

안녕하세요?

라이렌입니다.

첫 시작은 API네요

JW Player 라는 것입니다.

기본적으로 무료가 있고 몇 가지 서비스등을 원할 때는 돈을 지불해야하는데요

자신이 가진 파일을 JW Player로 재생만 할 경우에는 돈이 들지 않으니 나름 괜찮은 플레이어입니다.

간단히 살펴보면 스트리밍 서비스도 있는 것으로 보았는데요

제가 소개할 건 파일을 Player로 설정하는 것을 알려드리기 위해 작성하는 것이므로 궁금하신분은 찾아 들어가보시는 것이 나을 것 같습니다.

자 그럼 이제 시작하겠습니다.

일단 JW Player에 등록을 해야합니다. 그래야 API Key를 받을 수 있습니다.

안드로이드 SDK나 IOS쪽도 가능한 것으로 보입니다.

등록 방법은 원하신다면 나중에 작성하는 것으로 하고 Script 사용 하는 것부터 진행하겠습니다.

우선 script를 로딩합니다. 

<script type="text/javascript" src="https://content.jwplatform.com/libraries/<키 이름>.js"></script>

위 쪽에 문장이 JW 스크립트 로딩한 것입니다.

키 이름 부분은 JW 에 들어가셔서 스크립트 생성이 만들어지는 부분입니다.

저렇게 로딩을 했다면 

플레이어를 만들 준비를 해야겠죠?

// === JW Player Element ===
var player = jwplayer('player');

플레이어를 띄울 영역을 잡습니다.

id속성 값이 player인 영역에 플레이어를 띄울 것이라는 것을 명시하는 갑니다.

SetUp을 해줘야하는데요.

함수로소 만들어서 진행하는 것이 아무래도 API들을 섞어 사용하기에 좋을 것같다고 생각해서 함수로 만들 것입니다.

function setupPlayer(file_path, play_title) {
    player.setup({
        file: '실행할 파일(경로 포함)',
        image : '이미지 파일(경로 포함)',
        volume: 50,
        mute : false,
        autostart: false,
        repeat : true,
        aspectratio : "16:9",
        playbackRateControls: [0.5, 1, 1.5, 2],
        width: "320px",
        title : '제목'
    });

    // === JW Time Event ===
    player.on('time', function(e) {
        if( $("#timeRepeat").find('span').text() == "ON" ){
            if ( e.position >= Number($("#endTime").find('span').text().replace('s', '')) ){
                player.seek(Number($("#startTime").find('span').text().replace('s', '')));
            }
        }
    });

    // === JW Player Button Click Envent ===
    $(".btn_group").on('click', '#startTime', function (event) {
        $(this).find('span').empty().append(Math.floor(player.getPosition('VOD')) + "s");
    });
    $(".btn_group").on('click', '#endTime', function (event) {
        $(this).find('span').empty().append(Math.floor(player.getPosition('VOD')) + "s");
    });
    $(".btn_group").on('click', '#timeRepeat', function (event) {
        if($("#startTime").find('span').text() != "" && $("#endTime").find('span').text() != ""){
            var status = $(this).find('span').text();
            if ( status == 'OFF'){
                $(this).find('span').text('ON');
            } else if ( status == 'ON' ){
                $(this).find('span').text('OFF');
            }
        } else {
            alert("시작시간 또는 끝 시간이 설정 되지 않았습니다.");
        }
 });
}

함수로 설정했습니다.

플레이어 시작 옵션과, 구간 반복 구현을 위한 버튼 이벤트까지 함께 적어두었습니다.

Button Tag 3개를 만들어서 각각 시작시간, 끝시작, 구간반복의 명칭을 주었습니다.

그리고 태그안에 <span>을 추가하여 시작과 상태값을 표시해줄 수 있도록 했습니다.

startTime 눌렀을 때 재생 중 시간 값을 시작 Button 안 span에 표시를 하고

endTime 은 끝 버튼 안에 표시를 합니다.

그리고 timeRepeat 버튼 안의 span 문자가 ON일 경우 Time Event에서 시간 값과 비교하여 끝시간이 현재 시간보다 작다면 player.seek로 시작 지점에서 다시 재생토록 만들도록 하여 구현한 상황입니다.

첫 게시글은 이것으로 마치겠습니다.

다음 글은 구간 반봉에 사용했던 함수나 옵션에 관한 JW Player API 설명을 정리해보도록 하겠습니니다.

감사합니다.