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초 단위로 주기적으로 플레이 시간을 기록