[JW Player] 추가 버튼 삽입, 삭제 API

간단에 API를 작성하러 왔습니다.

 

예전에 JW Player API 관련하여 작성한 적이 있었는데, 이번에도 들고오게 되었습니다.

 

JW Player 객체 선언은 예전에 작성한 글에 있기도 하고 

API reference를 보기만해도 할 수 있으니 제외하도록 하겠습니다.

 

jwplayer().addButton(img, tooltip, callback, id, btnClass)

 

자, 위 이벤트를 실행하면 JW Player내부에 버튼이 삽입됩니다.

파라미터부터 설명드리겠습니다.

 

일단 img 입니다.

img는 문자 그대로 이미지를 넣어주면 됩니다.

단, html코드가 아닌 서버에 올려져 있는 이미지파일의 경로를 작성해주면 됩니다.

ex)  /images/re_play_button_img.jpg

jwplayer().addButton('/images/re_play_button_img.jpg', tooltip, callback, id, btnClass)

 

두번째 tooltip은 버튼에 마우스 올렸을 때, 보여질 메시지라고 보시면됩니다.

딱히 있어도 좋고, 없어도 그만이긴 합니다.

jwplayer().addButton('/images/re_play_button_img.jpg', '다시 재생', callback, id, btnClass)

 

callback은 버튼 클릭 시 실행할 함수명을 작성해주시면됩니다.

script 함수로 다시 재생이라는 함수를 생성해두었다고 가정해봅니다.(re_play)

그리고 버튼을 추가하고 추가한 버튼을 클릭했을 때, 발생할 함수로 re_play를 지정한다고하면

jwplayer().addButton('/images/re_play_button_img.jpg', '다시 재생', re_play, id, btnClass)처럼 될 겁니다.

 

그리고 id는 고유구분값입니다.

html 태그에서 id속성과 같다고 보시면됩니다.

jwplayer().addButton('/images/re_play_button_img.jpg', '다시 재생', re_play, 'replay', btnClass)

 

마지막 btnClass는 추가한 버튼에 class속성을 추가하는 파라미터입니다.

btn btn-blue 라는 2개의 클래스를 추가한다고 하면 최종 이벤트 스크립트 코드는 아래와 같이 표기될 겁니다.

 

jwplayer().addButton('/images/re_play_button_img.jpg', '다시 재생', re_play, 'replay', 'btn btn-blue')

 

 

자, 버튼을 추가를 해보았으니 추가한 버튼도 삭제를 해봐야겠죠?

 

버튼 삭제 이벤트는 아래와 같습니다.

jwplayer().removeButton(id)

 

파라미터로 버튼 추가 시 id로 넘겨주었던 파라미터를 넣어주면, 넣어준 id를 가지고 있는 버튼을 삭제합니다.

 

참고로 추가한 버튼에 대해서만 동작을합니다.

기본적으로 세팅되어있는 버튼은 삭제할 수 없습니다.

 

그래서 10초 되감기 버튼같은 것을 사용하지 않으려면 css로 강제로 감추어야합니다.

 

여기까지 jw player 버튼 추가 및 버튼 삭제였습니다.

 

궁금하신사항은 댓글로 문의주시기 바랍니다.

 

 

JW Player Javascript API reference 주소입니다.

 

https://developer.jwplayer.com/jwplayer/docs/jw8-javascript-api-reference