앱인벤터 비디어플레이어 컴포넌트

앱인벤터 비디오플레이어 컴포넌트

 

앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다.

이번 시간에는 비디오플레이어 컴포넌트를 활용하여 비디오를 화면에 출력해보자. 

 

. 비디오플레이어 컴포넌트

미디어 팔레트에서 비디오플레이어 컴포넌트는 스마트폰에 비디오파일이나 동영상 URL을 활용하여 비디오를 출력해준다. 

간단한 비디오플레이어 앱을 위해 비디오플레이어 컴포넌트, 버튼 컴포넌트를 활용하여 예제를 만들것이다.

 

팔레트

비디오플레이어 컴포넌트는 팔레트에 “미디어”에 있다. 비디오플레이어 컴포넌트를 오른쪽 뷰어에 Drag&Drop하면 추가된다. 본 예제에서는 비디오플레이어 컴포넌트를 동작시키기 위해 텍스트박스 컴포넌트, 버튼 컴포넌트 플레이어 컴포넌트 및 음성변환 컴포넌트로 구성한다. 

 

 

뷰어

추가했을 때, 기본적으로 사각형이 뷰어 화면에 출력된다.

플레이 버튼, 스탑 버튼, 비디오플레이어 컴포넌트가 있다. 플레이 버튼을 클릭하면 비디오플레이어에 '재생하기' 블럭을 호출하여 비디오를 화면에 출력하며, 스탑 버튼을 클릭하면 재생되는 비디오를 정지시킨다.

 

앱인벤터 비디오플레이어 컴포넌트 활용예제

 

컴포넌트

컴포넌트에는 Screen1아래에 비디오플레이어 컴포넌트, 버튼 컴포넌트 2개로 구성된다.

. 수평배치 컴포넌트

. 플레이 버튼 컴포넌트

. 스탑 버튼 컴포넌트

. 비디오플레이어 컴포넌트

  

비디오플레이어 속성값

비디오플레이어 속성값에는 높이, 너비, 소스, 보이기여부, 볼륨 값이 있다.

높이와 너비는 비디오플레이어의 가로와 세로의 크기를 지정한다.

소스는 비디오플레이어 영사위치와 파일이름을 지정한다.

보이기여부는 비디오플레이어의 보이기 여부를 지정한다. true이면 비디오플레이어가 보이며, false이면 비디오플레이어는 보이지 않게 된다.

볼륨은 동영상의 소리 크기를 지정할 수 있으며, 볼륨값의 범위는 0~100이며 기본값은 50이다.

앱인벤터 비디오플레이어 속성값

 

비디오플레이어 컴포넌트 이벤트 블럭들

 비디오플레이어 컴포넌트 이벤트 블럭에는 '재생을완료했을때', 'VideoPlayerError' 블럭이 있다.

'재생을완료했을때' 블럭은 소스로 지정된 동영상 재생이 완료되었을 때 호출되는 블럭이다. 

'VideoPlayerError' 블럭은 동영상 재생시 오류가 발생했을 때 호출되는 블럭이다.

 

앱인벤터 비디오플레이어 이벤트 블럭들

 

 비디오플레이어 컴포넌트 호출 블럭들

 

비디오플레이어 컴포넌트 호출 블럭에는 '재생시간가져오기', '일시정지하기', '찾아가기', '시작하기', '정지' 블럭이 있다. 

'재생시간가져오기' 블럭은 소스로 지정된 동영상의 전체 재생 시간을 밀리초로 반환하는 블럭이다.

'일시정지하기' 블럭은 재생중인 동영상을 일시정지하는 블럭이다. 그리고 다시 재생하고자 하면 '시작하기' 블럭을 통해 일시정지된 위치에서 다시 재생한다.

'찾아가기' 블럭은 '밀리초'에 해당하는 지점으로 영상 재생위치를 지정한다. 

'시작하기' 블럭은 소스로 지정된 동영상을 재생하는 블럭이다.

'정지' 블럭은 재생 위치를 처음으로 옮기고 동영상 재생을 중지하는 블럭이다.

 

앱인벤터 비디오플레이어 컴포넌트 호출 블럭들

 

비디오플레이어 컴포넌트 가져오기/지정하기 블럭들

 

. 비디오플레이어 컴포넌트 전체화면 블럭

동영상을 전체화면으로 재생할지, 지정된 화면크기로 재생할지를 지정하는 블럭이다. true값을 지정하면 전체화면으로 동영상이 재생된다. false 값이면 비디오플레이어의 너비와 높이 크기로 동영상이 재생된다.

 

앱인벤터 비디오플레이어 컴포넌트 전체화면 블럭

 

. 비디오플레이어 컴포넌트 소스 블럭

 

재생할 동영상 파일을 지정하는 블럭이다. 소스값에는 미디어에 업로드한 경우, 파일 이름을 지정하면 되고, 사용자 스마트폰에 저장된 파일의 경우에는 절대경로를 지정하면 된다.

 

앱인벤터 비디오플레이어 컴포넌트 소스 블럭

 

. 비디오플레이어 컴포넌트 보이기여부 블럭

 

재생할 동영상을 화면에 보이기 여부를 지정하는 블럭이다. true이면 화면에 동영상을 보여주며, false이면 화면에 동영상을 보여주지 않는다.

 

앱인벤터 비디오플레이어 컴포넌트 보이기여부 블럭

 

. 비디오플레이어 컴포넌트 볼륨 블럭

 

재생할 동영상의 볼륨을 지정하는 블럭이다. 볼륨값의 범위는 0~100이며 기본값은 50이다. 100보다 큰 값을 지정하면 최대값 100이 지정되고 0보다 작은 값을 지정하면 0값이 지정된다.

 

앱인벤터 비디오플레이어 컴포넌트 볼륨 블럭

 

눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.

간단하지만 직접 해보면 이해하고 자신감이 생길거에요...

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다