유투브 같은 웹플레이어 만들기 jPlayer
카군입니다.
참 바쁜 주 입니다.
한화의 승전 소식이 예년 보다 잘 들리고 메르스로 인해 시끄럽기도 했지만 ....개발자는 일을 해야 하기 때문에
이런 소문은 뒤로 한채...
사실 요 근래 웹 플레이어 개발 건 때문에 정신이 없었습니다. 나름 재밌기도 했습니다.
HTML5 의 video 태그는 유레카였습니다. 동영상 웹플레이어 를 듣는 순간 HTML5 VIDEO 태그를 생각했습니다.
그것만이 길이다... 라고 생각하기도 했고...
암튼 몇일 순수 디자인에 ... 개별 이벤트에... 별에 별 기능을 생각하여 요구 분석을 해보니 ... 당췌 기간내에 개발이 불가능 하다는 빠른 판단력( 귀찮기도 했음 ) 으로 오픈 소스를 찾아 돌아다녔습니다.
그때 눈에 들어온 jPlayer 란 동영상 웹 플레이어는 정말이지 ... 제이쿼리를 처음 접했을 때처럼 우와.... 감탄만...
메인 홈페이지 입니다.
기능을 우선 볼까요.. 들어 오자 마자 살펴야 할 dev guide 개발 가이드. 다른 곳에선 API 등등 이겠죠
들어 가게 되면 온 갖 이벤트며 메소드 , css 등등 여러 가지가 있습니다. 하지만 약간 아쉬운 것은 기능 설명이 너무 간단하고 사용 방법에 대한 예제가 좀 부족해 보입니다. 검색 하며 찾은 건데 스택오버플로에 사용했던 사람들이 질문을 많이 올려 놓은 것 같더군요 .. 이런 곳에서 지식을 얻으면서 웹플레이어를 만들어 봅시다. 다운로드 탭에서는 역시 기본 플레이어 에 대한 소스가 올라와있죠. 동영상 플레이어뿐만 아니라 mp3 재생 플레이어도 가능 합니다.
이 페이지는 데모 탭에 있는 동영상 플레이어 인데 플레이어를 만지면 아래 있는 이벤트가 작동 하는 순간을 볼수 있습니다. 각자 이벤트에 대응 하는 이벤트를 심어 주고 싶다면 꼭 필요한 화면이 되겠죠?
물론... 다른 디자인이 입혀진 확장 소스는 유료더군요... 하지만 거기까진 필요없습니다. 정말 심플한 기능만 필요하기 때문입니다.
해서 소스를 받고 제일 먼저 한건 UI에 대한 개선 이었습니다. 저런 거창하게 큰 컨트롤러는 필요없고 버튼이 너무 크고 등등 ... 유투브를 모티브로 해서 개선을 했죠. 개발자 이지만... 디자이너모드로 변신 하여 플레이 버튼과 이런 저런 버튼을 직접.... 만들어 봤습니다.
그럴싸 한가요? ㅋㅋㅋ 그림을 그릴수 없기 때문에 선과... 도형, 지우개 기능으로만 만든 볼품없는 아이콘을 생성 했습니다. 이를 도와준 사이트를 소개 할까 하는데 저는 웹 포토샵이라 부릅니다.
http://apps.pixlr.com/editor/ 이곳에서 간단한 이미지 작업을 주로 하는데 이용해 보시면 압니다. ㅎㅎ 약간의 포토샵 기능이 대단 하다란 말을 자동으로 내밷게 해줍니다.
자 이제 데브가이드도 봣고 ... 일어나는 이벤트도 UI도 해결 됫다 치고 개발을 진행 했습니다. 사실... 지금 까지 이 작업을 좀 했습니다.
UI 작업과 API 에대한 이해와 실험 등등 으로 실직적인 개발은 진행 하면서 리뷰 하겠습니다.
그럼 이만