저작권 안내: 저작권자표시 Yes 상업적이용 No 컨텐츠변경 No

스프링5 입문

JSP 2.3

JPA 입문

DDD Start

인프런 객체 지향 입문 강의

'이어보기'에 해당되는 글 1건

  1. 2012.07.19 [팁] Flowplayer를 이용한 이어보기 기능 구현 (1)

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. 2013.10.15 13:23  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다