VideoPlayer 소개

다양한 종류의 콘텐츠로 구성된 웹 환경에서 미디어 플레이어는 필수 요건이 됐습니다. 기존에 개인이 휴대용 장치에 넣어 다니며 사용하던 비디오, 오디오 파일을 웹을 통해 저장 공간의 제약 없이 전문적으로 제공하는 서비스가 주목받고 있습니다. 이런 추세에 맞춰 넥사크로에서는 미디어를 재생하고 제어할 수 있는 VideoPlayer 컴포넌트를 제공하고 있습니다.

VideoPlayer는 비디오, 오디오 파일 및 스트리밍을 재생할 때 사용하는 컴포넌트입니다. 간단한 속성의 설정만으로 미디어 재생에 필요한 재생/정지 버튼, 진행표시줄, 전체 화면, 볼륨 조절 등의 기능을 갖춘 UI 컨트롤을 기본으로 제공합니다. 따라서 개발자는 제어 기능을 별도로 구현할 필요 없이 미디어를 이용한 응용 애플리케이션을 빨리 개발할 수 있습니다. 만일 기본 컨트롤 기능을 사용하지 않고 직접 컨트롤 기능을 구현하고 싶다면 제어에 필요한 다양한 속성 및 메소드를 이용해 스크립트로 구현하는 것도 가능합니다.

VideoPlayer는 webm, ogg, mp4(h.264) mp3, wav, flac 등의 다양한 비디오, 오디오 형식을 지원합니다. 자세한 내용은 도움말을 참고하세요.

사용 예

다음은 미디어 서비스를 제공하는 어느 사이트의 미디어 플레이어 예를 보여줍니다. 사용자는 원하는 미디어를 재생하는 것은 물론 컨트롤을 사용하여 해상도, 프레임까지 조절하며 미디어를 즐길 수 있습니다.

VideoPlayer 만들기

sample_videoplayer_01.xfdl

툴바에서 VideoPlayer를 선택한 후, Form 위에 적당한 크기로 드래그하여 생성합니다.

VideoPlayer를 사용하려면 먼저 url 속성에 미디어의 위치를 설정해야 합니다. 아래 표의 값은 샘플에서 사용하는 값이므로 개발 시에는 파일이 실제 있는 URL을 설정해 주십시오.

VideoPlayer를 재생하거나 조절하려면 UI 컨트롤이 있어야 하는데 이는 showcontrolbar 속성을 true로 설정해야 사용할 수 있습니다. 컨트롤에는 기본적으로 재생, 정지 버튼, 진행표시줄, 볼륨 조절, 전체화면, 파일 다운로드 기능이 있습니다.

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다.

컨트롤에서 플레이 버튼을 눌러 비디오를 재생시킵니다. 정상적으로 비디오가 재생되는지 확인하고 각 기능을 사용해 봅니다.

컨트롤 기능 만들기

VideoPlayer 컴포넌트에서 제공하는 여러 기능을 사용하면 컨트롤을 직접 구현할 수 있습니다. 이번 장에서는 VideoPlayer를 제어할 때 필요한 속성과 메소드, 이벤트를 사용해 컨트롤 기능을 만들어 봅니다.

예제

다음은 VideoPlayer 컴포넌트의 여러 속성, 메소드, 이벤트를 사용하여 콘텐츠를 재생하는 플레이어 예제입니다.

sample_videoplayer_02.xfdl

• Play 버튼은 파일을 재생합니다. 재생이 시작되면 우측의 Play Time에 재생 시간이 초 단위로 표시됩니다.

• Pause, Stop 버튼은 각각 재생을 일시 중지시키는 기능과 멈추는 기능을 합니다.

• Forward 버튼은 영상을 2초만큼 앞으로, Rewind 버튼은 영상을 2초만큼 뒤로 이동합니다.

• Mute 체크박스를 체크하면 음소거 됩니다.

예제에서 사용한 핵심 기능

play

영상 파일을 재생하는 메소드입니다. 영상을 재생하면 oncurrenttimechanged 이벤트가 발생합니다.

pause

재생중인 영상을 일시 정지하는 메소드입니다.

stop

영상 재생을 중지시키고 재생 위치를 처음으로 되돌리는 메소드입니다.

currenttime

영상의 재생 위치(시간)를 설정하는 속성입니다. 단위는 ms(밀리초)입니다.

duration

영상 파일의 총 재생 시간을 갖는 읽기 전용 속성입니다.

mute

영상 재생시 음소거를 설정하는 속성입니다. true로 설정하면 음소거됩니다.

oncurrenttimechanged

영상의 재생 위치가 변경될 때 발생하는 이벤트입니다. 영상이 재생되면 oncurrenttimechanged 이벤트가 지속적으로 발생합니다.

onplaystatuschanged

영상의 재생 상태가 변경될 때 발생하는 이벤트입니다.

newstate

영상의 재생 상태 정보를 갖는 속성입니다. 웹 브라우저에서는 상태에 따라 stop, pause, play, buffer, ended의 다섯 가지 값을 갖습니다.

예제 구현 방법

툴바에서 VideoPlayer 1개, Button 5개, CheckBox 1개, Static 2개를 위의 예제와 같이 Form 위에 적당한 크기로 드래그하여 생성, 배치합니다.

생성한 컴포넌트의 속성을 다음과 같이 설정합니다.

• Play 버튼의 onclick 이벤트 함수

Play 버튼을 선택한 후 onclick 이벤트 함수를 다음과 같이 추가합니다.

this.btn_play_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.VideoPlayer00.set_url("https://github.com/mediaelement/mediaelement-files/blob/master/big_buck_bunny.mp4?raw=true");
	this.VideoPlayer00.play();
};

VideoPlayer00 컴포넌트의 url 속성에 영상 파일의 URL을 설정합니다. play 메소드를 호출하면 url 속성에 설정한 파일이 재생됩니다.

• Pause 버튼의 onclick 이벤트 함수

Pause 버튼을 선택한 후 onclick 이벤트 함수를 다음과 같이 추가합니다.

this.btn_pause_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.VideoPlayer00.pause();
};

• Stop 버튼의 onclick 이벤트 함수

Stop 버튼을 선택한 후 onclick 이벤트 함수를 다음과 같이 추가합니다.

this.btn_stop_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.VideoPlayer00.stop();
};

• Forward 버튼의 onclick 이벤트 함수

Forward 버튼을 선택한 후 onclick 이벤트 함수를 다음과 같이 추가합니다.

this.btn_forward_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.VideoPlayer00.set_currenttime(this.VideoPlayer00.currenttime + 2000);
};

VideoPlayer00의 currenttime 속성은 영상의 재생 위치를 밀리 초(ms) 단위로 설정합니다. 다음 코드는 현재 위치에서 2초만큼 앞으로 재생 위치를 설정합니다.

• Rewind 버튼의 onclick 이벤트 함수

Rewind 버튼을 선택한 후 onclick 이벤트 함수를 다음과 같이 추가합니다.

this.btn_rewind_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.VideoPlayer00.set_currenttime(this.VideoPlayer00.currenttime - 2000);
};

VideoPlayer00의 currenttime 속성은 영상의 재생 위치를 밀리 초(ms) 단위로 설정합니다. 다음 코드는 현재 위치에서 2초만큼 뒤로 재생 위치를 설정합니다.

• Mute 체크박스의 onchanged 이벤트 함수

Mute 체크박스를 선택한 후 onchanged 이벤트 함수를 다음과 같이 추가합니다.

this.chk_mute_onchanged = function(obj:nexacro.CheckBox,e:nexacro.CheckBoxChangedEventInfo)
{
	if(e.postvalue)
	{	
		this.VideoPlayer00.set_mute(true);
	}
	else
	{
		this.VideoPlayer00.set_mute(false);
	}	
};

e.postvalue는 변경된 체크박스의 값을 갖습니다. 체크박스가 체크되면 VideoPlayer00의 mute 속성을 true로 설정하고, 체크박스가 해제되면 VideoPlayer00의 mute 속성을 false로 설정합니다.

• VideoPlayer의 oncurrenttimechanged 이벤트 함수

VideoPlayer를 선택한 후 oncurrenttimechanged 이벤트 함수를 다음과 같이 추가합니다.

this.VideoPlayer00_oncurrenttimechanged = function(obj:nexacro.VideoPlayer,e:nexacro.VideoCurrentTimeChangedEventInfo)
{
	var strPlayTime = nexacro.round(this.VideoPlayer00.currenttime / 1000) + " / " + nexacro.round(this.VideoPlayer00.duration / 1000);
		
	this.stt_playtime.set_text(strPlayTime);
};

oncurrenttimechanged는 VideoPlayer에서 재생 위치가 변경되면 발생하는 이벤트입니다. 영상의 총 재생시간과 현재 시간을 구해 화면의 Static 컴포넌트에 표시합니다.

재생 시간은 밀리초 단위이므로 1000으로 나누어 초 단위로 환산합니다. 환산한 시간은 소수점을 포함하므로 사용자가 보기편하도록 round 메소드를 사용해 반올림한 정수로 계산합니다. 계산된 결과는 (현재 재생 시간) / (총 재생 시간) 형식으로 표시됩니다.

• VideoPlayer의 onplaystatuschanged 이벤트 함수

VideoPlayer를 선택한 후 onplaystatuschanged 이벤트 함수를 다음과 같이 추가합니다.

this.VideoPlayer00_onplaystatuschanged = function(obj:nexacro.VideoPlayer,e:nexacro.VideoPlayStateChangedEventInfo)
{
	switch(e.newstate)
	{	
		case "stop":
				this.stt_playtime.set_text(" ");
		case "pause":
		case "play":
		case "buffer":
		case "ended":
		default:
			trace("state: "+ e.newstate);
	}
};

onplaystatuschanged는 VideoPlayer의 재생 상태가 변경될 때 발생하는 이벤트입니다. e.newstate의 영상 재생 상태 정보에 따라 분기하여 필요한 처리를 할 수 있습니다.

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다.

Play 버튼을 누르면 영상 파일이 재생되며 재생시간이 표시됩니다. 각 버튼을 눌러 동작에 이상이 없는지 확인합니다.