티스토리 툴바


저작권 안내 (펌 하실 때)
  • 저작권자표시 Yes, 상업적이용 No , 컨텐츠변경 No

java에서 동영상의 스틸컷을 추출하기 위해 ffmpeg을 Runtime.exec()로 실행하는데, ffmpeg이 실행이 종료되지 않고 뭄추는 현상이 발생했다. 확인해 본 결과 ffmpeg이 쏫아내는 에러 출력 메시지 때문이었다. Runtime.exec()로 ffmpeg Processor를 생성한 뒤에 아래 코드와 같이 에러 출력 스트림으로부터 데이터를 읽어오기만 하면 블록킹 없이 ffmpeg이 실행된다.


public File extractImage(File videoFile, int position,

File creatingImageFile) {

try {

int seconds = position % 60;

int minutes = (position - seconds) / 60;

int hours = (position - minutes * 60 - seconds) / 60 / 60;


String videoFilePath = videoFile.getAbsolutePath();

String imageFilePath = creatingImageFile.getAbsolutePath();


String[] commands = { "ffmpeg", "-ss",

String.format("%02d:%02d:%02d", hours, minutes, seconds),

"-i", videoFilePath, "-an", "-vframes", "1", "-y",

imageFilePath };


Process processor = Runtime.getRuntime().exec(commands);


String line1 = null;

BufferedReader error = new BufferedReader(new InputStreamReader(

processor.getErrorStream()));

while ((line1 = error.readLine()) != null) {

logger.debug(line1);

}

processor.waitFor();

int exitValue = processor.exitValue();

if (exitValue != 0) {

throw new RuntimeException("exit code is not 0 [" + exitValue

+ "]");

}

return creatingImageFile;

} catch (IOException e) {

throw new RuntimeException(e);

} catch (InterruptedException e) {

throw new RuntimeException(e);

}

}


참고로, 위 코드는 동영상으로부터 특정 시점의 썸네일 이미지를 추출하는 코드이다.


저작자 표시 비영리 변경 금지
Posted by 최범균 madvirus

댓글을 달아 주세요

  1. 2013/04/24 02:46  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

페이스북 친구들과 댓글을 공유하고 싶다면 아래를 이용해주세요.

Flowplayer를 이용한 이어보기 기능을 구현해 보았다. 몇 번의 삽질 끝에 잘 동작하는 버전을 정리한다. 관련 코드는 아래와 같다.


<script type='text/javascript'>

var seekTime = 0; // 이어보기 할 시간을 저장

function initPlayer() {

flowplayer("player", "/player/flowplayer-3.2.12.swf", {

log: { level: 'debug', filter: 'org.flowplayer.captions.*' },

clip: {

url: 'RTMP동영상URL', 

provider: 'rtmp',

autoPlay: false, // 자동 시작 아님

onStart: function() {

if (seekTime > 0) {  // 이어보기 시간이 0보다 크면

$f("player").seek(seekTime); // seek 이용 시간 이동

}

}

},

plugins:  {

rtmp: {

url: "/player/flowplayer.rtmp-3.2.10.swf",

netConnectionUrl: 'rtmp://wowza.racon.scgs.co.kr:1935/vod'

},

controls: {

url: "flowplayer.controls-3.2.12.swf"

}

}

});

setTimeout(function() {

seek();

},1000);

}

function seek() {

if (!aleadyViewed) { // aleadyViewed는 처음 보는 영상인지의 여부를 보관

$f("player").play(); // 첨보는 영상이면 바로 플레이

return;

}


if(confirm("이어보시겠습니까?")) { // 이미 시청했다면

seekTime = ${elapsedTime}; // 시청한 시간을 seekTime으로 지정

}

$f("player").play();

}

</script>


전에 시청한 시간은 다음의 두 가지 방법으로 기록하면 된다.

  • 플레이 도중 다른 페이지로 이동할 때, 플레이 시간을 기록
  • 또는 10초 내지 20초 단위로 주기적으로 플레이 시간을 기록
플레이 시간은 getTime() API를 이용해서 구할 수 있다.

var time = $f("player").getTime(); // 초단위로 값 구함


저작자 표시 비영리 변경 금지
Posted by 최범균 madvirus

댓글을 달아 주세요

페이스북 친구들과 댓글을 공유하고 싶다면 아래를 이용해주세요.

멘탈 모델 책의 1~3장 부분에 대한 요약 발표 자료


멘탈모델 1-3장 자료
View more PowerPoint from beom kyun choi
저작자 표시 비영리 변경 금지
Posted by 최범균 madvirus

댓글을 달아 주세요

페이스북 친구들과 댓글을 공유하고 싶다면 아래를 이용해주세요.

JPA를 이용해서 구현하는 프로젝트에서 두 개의 프로퍼티를 묶어서 식별자로 사용해야 하는 경우가 생겼다. 그래서, @EmbeddedId를 이용해서 ID 필드를 지정하였다. 이 프로젝트는 Spring Data JPA를 이용해서 Repository를 자동생성하고 있는데, @EmbeddedId 부분에서 문제가 발생했다. 아래 코드는 문제를 발생시킨 리포지토리의 인터페이스이다.


public interface FollowRepository extends Repository<Follow, FollowId> {


    Page<Follow> findAll(Specification<Follow> spec, Pageable pageable);

...

}


Follow의 식별자의 타입은 FollowId 클래스이고, FollowId 클래스는 두 개의 프로퍼티를 갖고 있다. 그런데, 위 코드에서 findAll()을 실행하는 순간에 다음과 같은 쿼리가 실행되면서 문제가 발생했다.


select count((follow0_.FOLLOWING_ID, follow0_.USER_ID)) as col_0_0_ 

from FOLLOW follow0_ 

where ....


DBMS로 오라클을 사용하고 있는데, 위 count() 부분에서 쿼리 오류가 발생한 것이다. 처음엔 Spring Data JPA 문제일까 해서 커스텀 구현을 넣어 보았다.


public class FollowRepositoryImpl implements FollowRepositoryCustom {


    @PersistenceContext

    private EntityManager entityManager;


    @Override

    public Page<Follow> findAll(Specification<Follow> spec, Pageable pageable) {

        List<Follow> result = getResultList(spec, pageable);

        long total = count(spec);

        return new PageImpl<Follow>(result, pageable, total);

    }


    private List<Follow> getResultList(Specification<Follow> spec,

            Pageable pageable) {

        ...

        return query.getResultList();

    }


    private long count(Specification<Follow> spec) {

        CriteriaBuilder cb = entityManager.getCriteriaBuilder();

        CriteriaQuery<Long> c = cb.createQuery(Long.class);

        Root<Follow> root = c.from(Follow.class);

        c.select(cb.count(root));

        Predicate predicate = spec.toPredicate(root, c, cb);

        c.where(predicate);


        TypedQuery<Long> query = entityManager.createQuery(c);

        return query.getSingleResult();

    }


}


하지만, 결과는 동일했다. JPA API를 직접 사용해도 변화가 없는 걸 봐서는 Spring Data JPA의 문제는 아니였다. Spring Data JPA 1.1 버전을 사용하고 있었는데, 이 버전은 하이버네이트 3.6.9를 기준으로 하고 있어서 해당 버전의 하이버네이트를 사용했었다.


하이버네이트의 버전 문제가 아닐까해서 범위를 좀 더 좁혀서 구글링을 해 봤더니 하이버네이트에서 이런 문제가 발생하고 있는 듯 했다. (관련 문의가 포럼에 있었다.) 좀 더 파 볼까 하다가, 하이버네이트 버전을 올려보기로 결심했다. 하이버네이트 버전을 3.6.9에서 4.1.4로 올렸다.


결과는? 야호! 테스트케이스의 녹색바! 에러가 없어졌다. 처음부터 하이버네이트 버전 업부터 할 걸, 괜히 코드 작성했다. 오픈소스에서 뭔가 이상한 문제가 있으면 먼저 버전을 올려보라는 걸 다시 한 번 확인했다.


저작자 표시 비영리 변경 금지
Posted by 최범균 madvirus

댓글을 달아 주세요

  1. 권남 2012/07/12 17:37  댓글주소  수정/삭제  댓글쓰기

    @IdClass를 사용할때도 마찬가지 현상이 발생합니다.
    @IdClass/MySQL

  2. PKH갈휘 2012/07/16 22:22  댓글주소  수정/삭제  댓글쓰기

    버전업후에 말끔해졌네요, 감사합니다.

페이스북 친구들과 댓글을 공유하고 싶다면 아래를 이용해주세요.

얼마전에 트윗에 올라온 '개발자라고 착각하는 무늬만 개발자?'http://techit.co.kr/6551 글을 읽었다. 이 글이 한국의 많은 개발자들에게 생각할 거리를 던져주었다고 생각한다. 이 글에 대한 답글은 아니지만 필자가 개발자인가라는 질문을 하고 싶어져서 썰을 좀 풀어보조자 한다. 참고로 필자는 월급을 받고서 일하기 시작한지는 12년째로 접어들고 있다.


현재 내가 하는 역할


필자는 현재 개발 팀장을 하고 있다. 3년전부터 개발 팀장이라는 직책을 맡고 있고, 지금 하고 있는 일은 다음과 같다.

  • 아키텍처 설계하기, 기술 선택하기
  • 프로젝트 초반에 개발환경 구축하기
  • 주요 도메인 모델 설계 또는 팀원이 설계한 것 리뷰하기
  • 프로젝트 일정 계획 세우기/체크하기
  • 외부 인력 수급 관리하기
  • 난이도 높은 모듈/기능에 대한 구현하기
  • 여러 프로젝트에 동시에 참여하기
  • 회사 외적으로는 기술 관련 글 쓰는 사람

하고 있는 일을 주요 역할로 나눠보면 다음과 같다.

  • 아키텍트
  • 선임 개발자
  • 구현자
  • 프로젝트 관리자
  • 작가

필자는 (초보이긴 하지만) 아키텍트의 역할을 하고 있다. 만들어야 할 소프트웨어의 전체 구조를 설계하고 구현 기술을 선택하고 밀고 나간다. 이 외에 성능, 보안, 확장성 등 여러 가지 구현과 직결되는 내용을 챙긴다.


주요 도메인에 대한 모델을 설계하거나 팀원이 설계한 모델을 리뷰하는 선임 개발자의 역할도 수행한다. 경우에 따라 코드 중에 마음에 안 드는 부분을 변경하도록 지시도 한다. 팀이 규모가 크다면 이 역할을 다른 사람에게 주겠지만 아직 규모가 작기 때문에 필자가 하고 있다. 물론, 필자가 다 하는 것은 아니며 일부는 중간에 위치한 팀원이 초급 팀원을 가이드하고 있다.


때로는 직접 구현에 참여하기도 한다. 난이도가 다소 높거나 일정을 단축시켜야 할 때가 그런 경우다. 물론, 아직까지 제일 잘 하는 것 중의 하나가 코딩이기도 하다. 하지만, 코딩하는 비중은 높지 않다. 1주일에 2일 이상을 코딩에 투자하지는 않는다. 코딩에 많은 시간을 투자했다간 다음에 언급할 프로젝트 관리자로서의 역할을 제대로 수행할 수 없게 된다.


필자는 근무시간의 40~60% 정도를 프로젝트 관리에 사용한다. 큰 수준에서의 일정 계획을 수립하고, 진행 상황을 확인하고, 위험 요소를 해소하는 데 많은 시간을 소요한다. 예를 들어, 필요한 인력을 수급하기 위해 외부 업체와 미팅을 하며, 매일 오전마다 미팅을 통해 진척상황을 관리한다. 아직까지 프로젝트 관리는 잘 하는 분야가 아니기에 위기의 순간에는 윗사람의 힘을 많이 빌리곤 한다.


이 외에 회사의 소프트웨어 분야의 기술쪽 팀장으로서 몇 가지 업무에 프로젝트 코디네이터나 실행자로 참여하고 있다.


그리고, 남은 한 가지 역할은 기술 관련 글을 쓰는 작가이다. 작가는 필자가 오래도록 갖고 싶은 역할로서 블로그나 책을 통해서 기술 관련 내용을 글로 남기고 있다.


포기 또는 일부러 하지 않는 것


현재의 역할을 '잘' 해야 하기 때문에, 아래의 것들은 일부 포기하고 있다.

  • 모든 신기술들을 공부하기
  • 하루 종일 코딩하기
이제 모든 신기술을 익힐 수는 없다. 요점 정도만 알고 넘어가거나 호기심에 책을 읽어보는 정도이다. 예를 들어,  최근에 읽은 책 중의 하나는 node.js와 하둡에 대한 책이었는데, 이 책들을 읽은 이유는 node.js나 하둡 자체를 익히기 위해서가 아니라 node.js나 하둡이 무엇인지 알기 위함이었다.

하루 종일 코딩을 하는 것도 하지 않는다. 그랬다간 다른 역할에 구멍이 난다. 순간적으로 프로젝트의 진척도는 올라갈 지 몰라도 여러 곳에서 구멍이 나면서 프로젝트 들이 엉망이 될 수 있다.


역할을 잘 수행하기 위해 하는 것들


아키텍트나 구현자로서의 역할을 잘 수행해내기 위해 하는 일은 지속적으로 기술 흐름을 파악하는 것이다. 최근의 빅 데이터, node.js, HTML 5 등이 각광받는 이유 등에 대해 공부한다. 일단, 큰 그림 수준에서 이해하고 필요하면 한 놈씩 골라서 본격적으로 판다.


프로젝트 관리자는 필자가 잘 하고 싶은 분야는 아니다. 프로젝트 관리 자체가 아주 재미없는 건 아니지만 필자는 구현에 참여할 때가 더 즐겁다. 하지만, 구현이 재미있다고 구현만 하면 큰 그림을 볼 수 없고, 프로젝트 관리 능력이 없다면 사실상 괜찮은 아키텍트나 선임 개발자가 될 수 없음을 알고 있기에 어느 정도의 프로젝트 관리 능력을 보유하기 위해 노력하고 있다. 프로젝트 관리와 관련된 책이나 글을 읽고 따라해 보는 것이 주된 노력이다.


필자의 오랜 목표 중의 하나는 기본기와 관련된 책을 쓴 작가가 되는 것이다. 이를 위해 설계와 관련된 내용을 지속적으로 학습하고 있고, 틈틈히 글로 배운 지식을 정리해 보고 있고 언젠가 이를 바탕으로 좋은 책을 쓸 것이다. 더불어, 입문자를 위한 책을 쓰는 것도 중요하게 생각하고 있기 때문에 JSP나 Java 언어와 관련된 책도 꾸준히 개정해 나갈 것이다.

그래서 난 개발자인가? 앞으로도 개발자일 것인가?

그럼, 이제 본론으로 돌아가 '난 개발자인가?'라는 질문에 답을 해 보자. 프로젝트 관리도 넓은 의미에서 보면 개발의 범주에 속하지만, 아키텍트까지가 개발자가 아닌가 하는 생각이 든다. 그런 의미에서 필자는 현재 절반은 개발자로서 일을 하고 있고, 나머지 절반은 관리자로서 일을 하고 있다. 물론, 사생활에서는 작가로서 반, 개발자로서 반 정도의 시간을 보내고 있다. 이런 점에서 아직은 개발자라고 불려도 손색은 없을 것 같다.


요즘 내가 하는 고민은 이 비율을 앞으로 어떻게 조정할 것인가에 대한 것이다. 올해 이 고민을 시작했고, 올 해 안에 답을 내려고 한다. 참고로 필자는 올해 36세이며, 결정에 따라 앞으로 5년 동안 무슨 일을 할 지가 결정될 것이다. 이 결정에는 여러 가지 고려할 것들이 있는데, 이는 다음과 같다.

  • 아이의 나이
  • 또 다른 수입원
  • 즐거움

필자는 가장이고, 아이가 있기도 하다. 앞으로 가정에 돈이 많이 들어갈 예정이기에, 연봉은 중요한 고려 사항이다. 한국에서 평균적으로 팀원보다 프로젝트 관리자가 연봉이 높은 점을 감안하면 고민이 더 커진다. 프로젝트 관리자나 기술쪽의 더 높은 지위(본부장, CTO 등)로 경로를 잡아서 향후 5년간 연봉을 더 높여갈 것이냐 아니면 적당한 연봉에 만족하면서 구현자로서의 즐거움을 좀 더 만끽할 것이냐? 이것이 큰 고민거리다.


한국에서 구현자로서 15년 이상의 경력을 가진 고급 개발자는 (연봉으로서) 인정해주는 곳이 별로 없기에 구현자로서 즐거움을 계속해서 누리고 싶다면 프리랜서로 경력에 비해 더 낮은 돈을 받고 계속 일을 해야 할 지도 모른다. 아니면 단가를 그나마 잘 받기 위해 외주로 일을 받아 전문적으로 구현을 해 주는 업체를 차려야 할 지도 모른다. 하지만, 필자가 일을 계속 따 올 수 있는 영업력이 있는가에 대해서는 상당한 의구심이 든다. 


프로젝트 관리자 경로를 잡든 구현자의 기간을 연장하든 둘 다 국내에서는 쉽지 않아 보인다. 필자의 역량은 구현자로서 역할을 수행할 때 더 잘 발휘되지만 40살 넘은 구현자가 존재하는 경우가 흔치 않을 뿐더러, 개발 팀에서 40이 넘은 팀원을 구현자로 두고 있는 회사가 얼마나 있을까 하는 의구심도 든다. 물론, 관리자로서 본부장/CTO 등으로 승진하는 것은 더 어려운 일이다. 필자는 구현자로서의 역할을 잘 한다고 해서 관리자로서의 역할도 잘 할거라는 보장이 없음을 알고 있고, 그런 의미에서 피터의 법칙(승진할수록 일을 못 한다는)에 어느 정도 동의한다.


내 위에 직접적으로 연결된 40대 초/중반의 선배님들 중에 구현자로서 역할을 하는 분은 정말 소수에 불과하고 대부분은 관리자로서 일을 하고 계신다. 이런 모습을 보면 내가 앞으로 얼마나 구현자로서 한국에서 버틸 수 있을까 하는 고민에 빠져든다.


필자가 하고 싶은 것은 켄트 벡이나 밥 아저씨처럼 IT의 개발자로서 계속해서 일을 하면서 기본기를 닦아 줄 수 있는 지식을 전파하는 것이다. 언젠가 실력을 더 쌓아 객체 지향과 패턴에 대한 기초 서적을 쓰고 싶고, 그러면서 개발자로서 능력에 알맞은 대우를 받으면서 일을 하고 싶다. 이게 가능하지 않다면, 본업을 바꾸고 취미로 개발을 해야 할까?


한 동안은 하고 싶은 것과 먹고 살 거리를 함께 고민하는 시간이 될 것 같다. 고민해 보자.






저작자 표시 비영리 변경 금지
Posted by 최범균 madvirus

댓글을 달아 주세요

  1. Konn 2012/07/09 23:05  댓글주소  수정/삭제  댓글쓰기

    잘 읽었습니다. 작년쯤에 이런쪽에도 알아두는게 좋을것같아서 자바 책을 사놓고있는데 아직도 절반도 못 읽고있네요. 너무 어렵기도 하고 제가 너무 게을러서도 이겠죠. 언제나 느끼는거지만 이런 능력자분들을 보면 정말 부럽습니다.

  2. ddalki 2012/07/09 23:21  댓글주소  수정/삭제  댓글쓰기

    평생하게되는 고민같습니다.

  3. seungbeomi 2012/07/09 23:45  댓글주소  수정/삭제  댓글쓰기

    개발자라는 좋은(?) 직업을 가지고서도 모두들 이와같이 진로에 대한 고민을하게 되는 현실이 참 안타깝습니다.

    • madvirus 2012/07/10 11:41  댓글주소  수정/삭제

      옛날처럼 평생 직장 개념이 없고, 기술자를 부리는 사람 정도로 취급하는 사회이다 보니, 더 많은 고민을 하게 되는 것 같습니다. 앞으로 살아가기 위한 현실적인 방법을 찾아야겠지요.

  4. msbaek 2012/07/10 14:26  댓글주소  수정/삭제  댓글쓰기

    고민된다. 근데 꿈이 나랑 같다. 켄트벡이나 엉클밥. 근데 나는 관리를 하고 있는 듯. 요즘은 관리도 조금이고 프리젠테이션이 더 많은 듯. 에구.

  5. 그누 2012/07/10 15:16  댓글주소  수정/삭제  댓글쓰기

    개발자라면 누구나 가지고 있는 로망 아닌가요? 막상, 현실은 뒷받침이 안되어 주고요^

    이게 우리 스스로 변해야 합니다. 누군가 바꿔주길 기대하지 말고 ~ 작은것에서 부터 실천해가는 모습~

    님께서 작성해주신 역할 즉, 아키텍트, 선임 개발자, 구현자, 프로젝트 관리자, 작가
    등에 대한 정의 및 상세 액티비티 등을 정의해서~ 공유하는 계몽운동을 벌여야 합니다.

    널리 퍼뜨려야 하지요. 요샌 개발자가 스토리 보도까지 작성 책임을 돌리는 상황까지도 전개 되었다라는 애기가 나돌고 있지요 기획자는 단순히 그리러 왔을뿐이다 라고 고객님께서 편드는 세상이 왔으니 말이죠

  6. innerman 2012/07/20 23:22  댓글주소  수정/삭제  댓글쓰기

    제가 조금 나이가 더 많은데요... 전 아직도 개발하고 있습니다. 또 운좋게 개발만 해도 되는 환경에서요...(회사 전사가 애자일팀으로 변경되어서...)
    저는 개발자가 관리자가 되는 것은 반대입니다. 물론 아키텍트도 개발의 범주로 보구요... 코딩과 구별을 특별히 두고 싶지는 않네요... ㅋㅋ

페이스북 친구들과 댓글을 공유하고 싶다면 아래를 이용해주세요.

사이트에 동영상 플레이 기능을 넣고 싶을 때 고려해볼만한 플레이어가 Flowplayer이다. HTML5의 Video 관련 기능이 아직 완전하게 표준화되지 않은 시점이기에, PC 기반의 웹 브라우저에서 동영상을 플레이하는 가장 현실적인 방안은 플래시를 사용하는 것이다. 하지만, 규모가 작은 회사에서 플래시 개발자를 고용하거나 플래시 기반의 동영상 플레이어를 외주 주는 것은 비용 문제 때문에 쉽지가 않다. 이럴 때 바로 유용하게 사용할 수 있는 것이 Flowplayer (http://flowplayer.org/)이다.


Flowplayer는 GPL 3 라이선스를 따르는 오픈 소스로 제공되는 플레이어로서 라이선스를 따르는 한 자유롭게 사용할 수 있다. 또한, 로고를 마음대로 변경할 수 있는 상용 버전도 1개 도메인에 대해 95$ 밖에 안 하기 때문에 매우 싼 값에 플래시 기반의 동영상 플레이어를 사용할 수 있다. 게다가 다양한 플러그인들이 존재해서 필요한 기능들이 이미 존재하는 경우가 많았다. 이런 이유로 필자도 FlowPlayer를 선택하게 되었다.


Flowplayer의 주요 기능


동영상 플레이어니까 당연히 동영상을 재생해주는 기능을 제공하는데, 간략하게 주요 기능들을 정리해보면 다음과 같다.

  • 손쉬운 설치와 설정
  • pseudostreaming 지원 / RTMP 지원 /  YouTube 비디오 재생
  • 플레이어 이벤트를 처리할 수 있는 다양한 자바스크립트 API
  • 플러그인을 통한 손쉬운 기능 확장
  • ABR(Adaptive Bitrate) 지원
  • URL Obfuscation 기능
Flowplayer 자체는 매우 설치하기 쉽다. 다운로드 받은 파일을 웹 서버의 알맞은 곳에 올리고 간단한 자바 스크립트 코드를 이용하면 된다. 아래 코드는 RTMP 기반의 플레이 설정 예이다.


<script src="jquery-1.7.1.js"></script>

<script src="flowplayer-3.2.11.min.js"></script>


<script type="text/javascript">

$(function() {

flowplayer("player", "flowplayer-3.2.12.swf", {

clip: {

url: 'mp4:0000/00/1/1_PC1.mp4',

provider: 'rtmp'

},

plugins:  {

rtmp: {

url: "flowplayer.rtmp-3.2.10.swf",

netConnectionUrl: 'rtmp://wowza.myserver-host.com:1935/vod'

}

}

});

});

</script>

</head>

<body>

<div id="player" style="width: 644px; height: 276px; margin: 0 auto; text-align: center">

</div>

</body>

</html>


모든 설정이 위와 같이 JSON 형식의 자바 스크립트 코드로 이루어지기 때문에, Flowplayer 사이트만 참고하면 비교적 쉽게 동영상 재생 기능을 사이트에 추가할 수 있다.


다양한 이벤트 지원


동영상 재생이 종료되면 사용자에게 추가 정보를 알려주는 레이어를 띄워 주고 싶을 수 있다. 예를 들어, 상품에 대한 리뷰 동영상의 재생이 끝나면 상품에 대한 상세 보기 페이지로 이동할 수 있는 안내 레이어를 보여주고 싶은 경우가 있을 것이다. 이렇게 플레이어의 상태에 따라 특정한 동작을 하고 싶은 경우에는 Flowplayer가 제공하는 이벤트를 사용하면 된다.


플레이어가 제공하는 이벤트는 다음과 같은 것들이 있다.

  • volume: 볼륨 조절시 발생
  • load: 플레이어가 완전히 로딩될 때 발생
  • fullscreen, fullscreenExit: 풀스크린 모드 전환이나 취소시 발생
  • mouseOver, mouseOut: 플레이어 위에 마우스가 올라가거나 벗어날 때 발생
개별 클립에 대한 이벤트로는 다음과 같은 것들이 있다.
  • begin: 클립이 시작될 때 발생
  • finish: 클립이 끝날 때 발생
  • pause: 일시 중지할 때 발생
  • stop: 멈출 때 발생
  • seek: 시간을 이동했을 때 발생
  • cuepoint: 지정한 시간에 발생

위 이벤트에 반응하는 코드는 자바 스크립트를 이용해서 작성할 수 있다. 따라서, 자바 스크립트 코드만 작성할 수 있다면 각 이벤트가 발생할 때 원하는 기능을 수행할 수 있다.


유용한 플러그인들


Flowplayer의 장점 중 하나는 플러그인에 있다. 플래시와 자바 스크립트의 두 종료 플러그인이 존재하는데, 몇 가지 유용한 플러그인을 소개하도록 하겠다.


Content 플러그인


Content 플러그인은 플레이어 화면 위에 원하는 HTML을 보여줄 수 있는 기능이다. 링크 등을 걸 수 있기 때문에, 시청 도중에 관련 상품을 보여준다거나 종료 후 추가 정보를 보여주고 싶을 때 유용하게 사용할 수 있다.


[발췌: Flowpalyer]


Caption 플러그인


Caption 플러그인을 사용하면 자막을 올릴 수 있다. 아래는 Caption 플러그인을 사용해서 자막을 넣은 예를 보여주고 있다.


[발췌: Flowpalyer]


Menu 플러그인


Menu 플러그인을 사용하면 컨트롤바에 메뉴를 위한 버튼이 추가된다. 해당 버튼을 클릭하면 메뉴가 화면에 표시된다. 메뉴 목록은 자바 스크립트 코드를 이용해서 입력할 수 있다. 관련 비디오 목록을 보여주는 용도로 사용할 수 있을 것이다.


[발췌: Flowpalyer]


오픈소스와 플러그인 확장


개발자 입장에서 Flowplayer의 가장 매력적인 점은 오픈 소스이면서 플러그인을 쉽게 확장할 수 있다는 점이다. 컨트롤바부터 모든 것이 플러그인을 처리되기 때문에 플래시 개발 역량을 조금만 키우면 Flowplayer의 플레이 기능을 사용하면서 동시에 원하는 기능을 제공하는 플러그인을 추가할 수 있다.

저작자 표시 비영리 변경 금지
Posted by 최범균 madvirus

댓글을 달아 주세요

  1. 권남 2012/07/06 19:31  댓글주소  수정/삭제  댓글쓰기

    저희는 FlowPlayer를 사용하다가 HTML5 video + video.js 기반으로 변경하였습니다.
    Flash를 사용하기 보다는 HTML5와 그 fallback(video.js 나 jwPlayer 등)을 저는 권하고 싶습니다.
    MP4 코덱 + HTML5 Video + video.js 로 작업하면 스마트폰, 태블릿, PC 모두 아울러서 거의 모든 현대적인 브라우저에서 재생가능합니다.

    단, 플러그인 등은 당연히 부족합니다.

    • madvirus 2012/07/06 20:16  댓글주소  수정/삭제

      아직 HTML5로는 RTMP와 같은 스트리밍을 할 수 없어서 Flowplayer를 선택했어요. 아무래도 동영상 스트리밍을 하기에 video 태그는 무리네요.

페이스북 친구들과 댓글을 공유하고 싶다면 아래를 이용해주세요.