====== 비디오 기본 가이드 ======
이 화면은 비디오 컴포넌트에 대한 샘플 화면이다.
오디오 컴포넌트는 HTML5 video 태그를 이용한 컴포넌트이다.
관련 속성으로 show_controls, source, default_source_usage, volumn, muted, auto_play, source, click_setfocus, alt가 있다.
관련 API로 play, pause, stop, getautoplay, setautoplay, getautoreplay, setautoreplay, requestfullscreen, getvolume, setvolume, getsource, setsource,
getduration, getplaybackrate, setplaybackrate가 있다.
관련 이벤트로 on_click, on_dblclick, on_play, on_ended, on_pause, on_timeupdate, on_loadeddata가 있다.
===== 예시 =====
템플릿 위치: /HTML5/COMPONENT/VIDEO/video_basic
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/VIDEO/video_basic.xml|video_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/VIDEO/video_basic.js|video_basic.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/VIDEO/video_basic|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
// 화면 로드 이벤트
function screen_on_load()
{
// 소리 크기 프로그래스바 위치 설정
this.pbVolume.setpos(this.video.getvolume());
// 재생 위치 프로그래스바 위치 설정
this.pbProgress.setpos(0);
// 비디오 파일 URL 표시
this.fld_source.settext(this.video.getsource());
}
/////////////////////////////////////////////////////////////////////////////
// 비디오 컴포넌트 이벤트 시작
/////////////////////////////////////////////////////////////////////////////
// 비디오 재생 시작 이벤트
function video_on_play(objInst)
{
this.txtPlayStatus.settext("재생");
}
// 비디오 재생 완료 이벤트
function video_on_ended(objInst)
{
this.txtPlayStatus.settext("종료");
this.pbProgress.setpos(100, false);
}
// 비디오 재생 멈춤 이벤트
function video_on_pause(objInst)
{
this.txtPlayStatus.settext("멈춤");
}
// 비디오 재생 시간 갱신 이벤트
function video_on_timeupdate(objInst, current_time)
{
var duration;
duration = this.fld_duration.gettext();
this.pbProgress.setpos(Math.round(current_time / duration * 100), false);
}
// 비디오 데이터 로드 완료 이벤트
function video_on_loadeddata(objInst)
{
this.fld_duration.settext(this.video.getduration());
this.txtPlayStatus.settext("재생 준비 완료");
}
// 비디오 클릭 이벤트
function video_on_click(objInst)
{
screen.alert("video_on_click");
}
// 비디오 더블클릭 이벤트
function video_on_dblclick(objInst)
{
screen.alert("video_on_dblclick");
}
/////////////////////////////////////////////////////////////////////////////
// 비디오 컴포넌트 이벤트 끝
/////////////////////////////////////////////////////////////////////////////
// 재생 버튼 이벤트
function btnPlay_on_mouseup(objInst)
{
this.video.play();
}
// 멈춤 버튼 이벤트
function btnPause_on_mouseup(objInst)
{
this.video.pause();
}
// 중지 버튼 이벤트
function btnStop_on_mouseup(objInst)
{
this.video.stop();
}
//
function btnSetAutoPlay_on_mouseup(objInst)
{
this.video.setautoplay(true);
}
function btnSetAutoPlayFalse_on_mouseup(objInst)
{
this.video.setautoplay(false);
}
function btnGetAutoPlay_on_mouseup(objInst)
{
alert(this.video.getautoplay());
}
function btnSetAutoReplay_on_mouseup(objInst)
{
this.video.setautoreplay(true);
}
function btnSetAutoReplayFalse_on_mouseup(objInst)
{
this.video.setautoreplay(false);
}
function btnGetAutoReplay_on_mouseup(objInst)
{
alert(this.video.getautoreplay(true));
}
// 소리 줄임 버튼 이벤트
function btnTurnDown_on_mouseup(objInst)
{
var audio_volume;
audio_volume = this.audio.getvolume() - 10;
this.pbVolume.setpos(audio_volume);
this.video.setvolume(audio_volume);
}
// 소리 키움 버튼 이벤트
function btnTurnUp_on_mouseup(objInst)
{
var audio_volume;
audio_volume = this.audio.getvolume() + 10;
this.pbVolume.setpos(audio_volume);
this.video.setvolume(audio_volume);
}
// 전체 화면 재생 버튼 이벤트
function btnRequestFullScreen_on_mouseup(objInst)
{
this.video.requestfullscreen();
}
// "0.5X" 버튼 이벤트
function btnPlayRate0_on_click(objInst)
{
this.video.setplaybackrate(0.5);
}
// "1.0X" 버튼 이벤트
function btnPlayRate1_on_click(objInst)
{
this.video.setplaybackrate(1);
}
// "2.0X" 버튼 이벤트
function btnPlayRate2_on_click(objInst)
{
this.video.setplaybackrate(2);
}