블루프린트로 재생 제어

블루프린트로 비디오 재생을 빨리감기, 되감기, 일시정지, 재개하는 방법 예제입니다.

Choose your operating system:

Windows

macOS

Linux

미디어 프레임워크로 비디오를 재생하는 것에 더해, 블루프린트 노드를 통해 플레이어가 비디오 재생을 제어하도록 할 수 있습니다.

여기서는 재생중인 비디오를 플레이어가 빨리감기, 되감기, 일시정지, 중지 등의 재생 제어를 할 수 있도록 하는 방법을 알아보겠습니다.

FinalHero.png

모든 플레이어 플러그인이 빨리감기 및/또는 되감기를 지원하지는 않습니다. 자세한 정보는 미디어 프레임워크 테크니컬 레퍼런스 문서를 참고하세요.

단계

여기서는 블루프린트 삼인칭 템플릿 시작용 콘텐츠 를 포함 생성한 프로젝트를 사용하고 있습니다. 재생을 위해 플레이리스트에 추가하고자 하는 비디오도 필요한데, 갖고 계신 것을 사용해도 되고, 이 샘플 비디오 에 우클릭하고 다운로드하여 사용하여도 됩니다.

  1. 콘텐츠 브라우저 에서 소스 패널을 펼치고 Movies 라는 폴더를 생성한 뒤 우클릭하고 탐색기에서 표시 합니다.

    ControllingPlayback_01.png

  2. 샘플 비디오( 또는 준비한 지원 비디오)를 프로젝트의 Content/Movies 폴더에 넣습니다.

    ControllingPlayback_02.png

    비디오 콘텐츠가 프로젝트 패키지에 포함되어 설치되도록 하기 위해서는, 반드시 콘텐츠를 프로젝트의 Content/Movies 폴더에 넣어야 합니다.

  3. 프로젝트에서 미디어 플레이어 를 생성하고 연결된 미디어 텍스처 애셋을 각각 MediaPlayer MediaPlayer_Video 로 만듭니다.

  4. 파일 미디어 소스 애셋을 만들고 Video 라 한 뒤 그 안에 File Path 2 단계 에서 추가한 비디오로 지정해 줍니다.

    ControllingPlayback_03.png

  5. 미디어 플레이어 애셋을 열고 Play on Open (열리면 재생) 옵션을 끕니다.

    ControllingPlayback_04.png

    이 예제에서는 미디어 소스를 열었을 때 재생이 자동 시작되도록 하기 보다는 플레이어에게 재생을 제어할 수 있도록 하고 있습니다.

  6. 메인 에디터의 모드 패널에서 기본 아래 Plane (면)을 끌어 레벨에 놓고 크기를 조절합니다.

  7. MediaPlayer_Video 텍스처를 끌어 에 놓은 뒤 디테일 패널에서 Media Sound Component (미디어 사운드 컴포넌트)를 추가한 뒤 자신의 미디어 플레이어 애셋으로 설정합니다.

    클릭하면 이미지 원본을 확인합니다.

  8. 메인 툴바의 블루프린트 - 레벨 블루프린트 열기 버튼을 클릭합니다.

    ControllingPlayback_06.png

  9. 레벨 블루프린트 에서, Media Player Object Reference 유형 변수 MediaPlayer 를 새로 만들고 자신의 MediaPlayer 애셋을 가리키도록 설정합니다.

  10. Ctrl 키를 누르고 MediaPlayer 변수를 끌어 그래프에 놓은 뒤 Event Begin Play 에서 Open Source 를 사용하여 Video 파일 미디어 소스 애셋을 엽니다.

    ControllingPlayback_07.png

  11. Up 키 이벤트를 추가하고 Flip Flop 에 연결한 뒤 Media Player 변수에서 Play Pause 를 아래처럼 사용합니다.

    ControllingPlayback_08.png

    플레이어가 위쪽 방향 키를 누르면 미디어 소스 재생이 시작되는 반면, 한 번 더 누르면 비디오 재생이 일시정지됩니다.

    일시정지는 Play Rate (재생 속도)를 0.0 으로 설정한 것과 같지만, (웹 캠이나 다른 비디오 캡처 하드웨어 소스처럼) 모든 미디어 소스가 일시정지를 지원하지는 않습니다. Can Pause 블루프린트 노드를 사용하여 미디어 소스가 일시정지를 지원하는지 확인할 수 있습니다.

  12. Left Right 키 이벤트를 추가한 뒤 Media Player 변수에서 Set Rate 를 사용하여 왼쪽 키는 -2 로, 오른쪽 키는 2 로 설정합니다.

    ControllingPlayback_09.png

    그러면 플레이어가 왼쪽 방향 키를 누르면 비디오 Play Rate (재생 속도)가 -2 (보통 정방향 재생은 1.0 이므로, 비디오 역방향 2 배속) 로 설정됩니다. 오른쪽 방향 키를 누르면, 비디오가 정상 재생 속도의 두 배 빨리 재생됩니다. 추가적인 블루프린트 로직을 통해 플레이어가 키를 누를 때마다 정방향 또는 역방향 2배 4배 6배 속도 재생이 가능하도록 만들 수 있습니다.

    플레이어 플러그인에 1.0 이외의 Play Rate (재생 속도)가 지원된다 하더라도, 실제 선택할 수 있는 재생 속도는 사용중인 미디어 소스에 따라 달라지기도 합니다. 지원되는 속도 확인은 Get Forward Rates Get Reverse Rates 블루프린트 노드, 또는 Support Rate 함수에 속도를 입력하여 지원되는지 확인할 수 있습니다.

    SupportRates.jpg

    속도는 Thinned Unthinned 로 구분됩니다. Thinned 라 함은 이 속도에 맞추기 위해 몇몇 프레임을 건너뛴다는 것을, Unthinned 는 모든 프레임을 이 속도로 디코딩한다는 것을 뜻합니다.

  13. Down 키 이벤트를 추가하여 Flip Flop 에 연결한 뒤, Media Player 레퍼런스에서 Get Time 함수 호출을 사용합니다.

    ControllingPlayback_10.png

    Get Time 함수 호출은 현재 재생 시간을 반환하며, 이것을 저장하여 나중에 비디오를 다시 열거나 재개할 때 사용합니다.

  14. Get Time 노드의 Return Value 에 우클릭하고 변수로 승격시킨 뒤 Stop Time 이라 합니다. 그리고 모든 노드를 Close 함수 호출에 그림처럼 연결합니다.

    ControllingPlayback_11.png

    그러면 아래 방향키를 누르면 미디어 플레이어를 닫지만, 미디어 플레이어가 중지된 시점의 시간을 변수에 저장합니다.

  15. Flip Flop B 핀에서 Open Source 노드를 사용하여 Media Source 를 자신의 Video 미디어 소스로 설정합니다.

    ControllingPlayback_12.png

    비디오가 다시 열리지만 처음부터 시작되는데, 이에 대해 다음 몇 단계에 걸쳐 다루겠습니다.

  16. Media Player 레퍼런스를 끌어놓고 Assign On Media Opened 이벤트 디스패처를 사용하여 그림과 같이 연결합니다.

    ControllingPlayback_13.png

    이벤트 디스패처 가 생성되며, 이는 미디어 소스가 완전히 열렸을 때만 연결된 이벤트를 호출합니다. 미디어 플레이어에 명령을 내릴 때는 이런 식으로 하는 것이 좋은데, 미디어 소스가 열리기도 전에 다른 작업을 하지 않도록 하기 위해서입니다. 미디어 플레이어가 열린 후 바로 명령을 내리려 해도, 미디어 소스가 완전히 열려 명령을 받을 수 있다는 보장이 없어 명령이 실패할 수 있습니다.

  17. Media Player 레퍼런스로부터 Seek 함수를 호출하고 Play 함수가 뒤따릅니다.

  18. Stop Time 변수를 Seek 노드의 Time 핀에 연결하고 Seek Play 노드를 OnMediaOpened 이벤트에 그림처럼 연결합니다.

    ControllingPlayback_14.png

    이제 플레이어가 아래 화살표를 누르면, 현재 시간을 저장한 후 미디어 플레이어를 닫습니다. 다시 한 번 누르면, Video 미디어 소스를 열고 완전히 열렸을 때, 비디오가 지정된 Stop Time 으로 이동한 뒤 비디오 재생을 시작(재개)합니다.

  19. 레벨 블루프린트 를 닫고 메인 툴바의 플레이 버튼을 눌러 에디터에서 플레이합니다.

최종 결과

이제 상하좌우 방향 키를 사용하여 비디오 재생 제어를 할 수 있을 것입니다.

위쪽 키를 누르면 비디오 재생/일시정지, 아래쪽은 비디오 닫기/다시열기, 왼쪽은 되감기, 오른쪽은 빨리감기 입니다.

언리얼 엔진 문서의 미래를 함께 만들어주세요! 더 나은 서비스를 제공할 수 있도록 문서 사용에 대한 피드백을 주세요.
설문조사에 참여해 주세요
취소