jw 플레이어 버전 6부터 모바일 구동이 가능하게끔 되어 저도 한번 써보려 했지만 아무리 찾아봐도 방법은 안 나오고 되지도 않고 해서 포기하고 버전 5만 계속 썼는데 어느새 버전 7이 나오고 다시 한번 도전한 결과 사용법을 알아냈습니다. 저처럼 아무리 찾아봐도 방법이 안 나와서 포기하시는 분이 있을 것 같아서 일단 사용법을 써봅니다. 설명을 잘 못해서....
1. 기본 html 생성하기
제일 중요합니다. 버전 5까지는 그냥 파일을 받아서 구글드라이브에 업로드 하는 형식으로 많이 쓰셨을 것 같은데 저도 버전 7을 그렇게 해도 되나 싶어서 해봤는데 안되더라고요. 제가 그냥 못한 걸수도 있지만;; http://www.jwplayer.com/ 그냥 이메일 주소 입력하시고 인증하시면 간단합니다. 무료계정을 눌러주세요. 프리미엄은 저도 안해봐서 잘 모르겠습니다.
계정을 만들고 로그인을 하시면 이런 화면이 뜰 겁니다. 1번의 Players 라 적힌 버튼을 눌러주세요.
들어가셔서 NEW PLAYER 버튼을 눌러서 플레이어를 만들어야 합니다. 화면에 보이는 것은 제가 만든 플레이어입니다. 처음 계정을 만들어서 들어가면 아마 jw에서 기본적으로 주는 480X272 인가 되게 조그마한 크기의 플레이어가 있을텐데 무시하고 그건 지워버리셔도 됩니다. 저희가 원하는 건 크기가 큰 반응형에 쓸 수 있는 플레이어니까요.
dimension은 16:9를 선택해주세요. 그래야만 흔히들 말하는 화면에 꽉 차는 플레이어를 생성할 수 있습니다. 그냥 크기 정하셔도 상관은 없습니다. design은 알아서 선택해주세요. 저 같은 경우 기본 플레이어와 플레이리스트가 뜨는 플레이어 두가지로 만들었습니다.
플레이어를 생성하셨으면 아까의 페이지로 돌아가서 이번엔 license key 버튼을 선택해줍니다.
메모장을 켜시고 저 주소들을 복붙해주세요. 참고로 저처럼 기본플레이어와 플레이리스트구동형을 따로 만드신 분은 그 따로 만든 플레이어를 각각 선택해서 주소를 따셔야 합니다.
이제 다됐습니다.
<script type="text/javascript" src="플레이어 주소"></script>
<script type="text/javascript">jwplayer.key="키 주소";</script>
<div id="player">Loading the player...</div>
<script type="text/javascript">
jwplayer("player").setup({
file: "동영상주소",
image: "이미지주소"
});
</script>
플레이어 주소와 키 주소에 각각 복사한 주소를 붙여넣어 주세요.
리스트구동형은 이쪽입니다.
<script type="text/javascript" src="플레이어 주소"></script>
<script type="text/javascript">jwplayer.key="키 주소";</script>
<div id="player">Loading the player...</div>
<script type="text/javascript">
jwplayer("player").setup({
playlist:[{
title:'1번 제목',
sources:[{file:'1번 동영상 주소'}],
image:'1번 이미지 주소',
},{
title:'2번 제목',
sources:[{file:'2번 동영상 주소'}],
image:'2번 이미지 주소',
},{
title:'3번 제목',
sources:[{file:'3번 동영상 주소'}],
image:'3번 이미지 주소',
}],
});
</script>
리스트 플레이어의 경우 파일 수를 줄이거나 늘리려면 {}를 경계로 더 붙여넣거나 삭제하시면 됩니다.
기본html.txt혹시 몰라 txt로 올려두었습니다.
2. 영상주소 생성하기
각자 영상을 올리시고 공유링크를 따면 되는데 일단 jw에 올리고 생성하는 방법을 설명하겠습니다. 필요없으신 분도 계실테니 접어두겠습니다.
3. 유의할 점
뭐 이런거까지 쓸 필요는 없는데 작성하다가 저처럼 당황하시는 분이 계실까봐..
글 작성을 할때 HTML 모드를 누르고 다시 모드를 해제하면 플레이어는 무슨 loading the player....라는 문구만 뜨고 아무것도 안 뜰텐데 그냥 저장누르면 알아서 저절로 뜨게 되어있습니다.
티스토리의 경우 화면설정을 할 때 한 페이지에 목록과 내용이 여러개 뜨게 만드는게 있는데 그렇게 여러개가 뜨면 파일이 다 꼬여서 제대로 안 뜨고 여기 있어야 할 파일이 저쪽에 가 있는 일이 벌어지니 한 페이지에 내용 하나씩만 뜨게 설정해주세요.