영상 재생시키기

# 학습 과정 소개

내가 찍은 영상 혹은 함께 보고 싶은 영상을 가져와 재생할 수 있습니다.

# Youtube 관련 컴포넌트 소개

영상은 UI로 사용하거나 World에 배치해 사용할 수 있습니다. UI로 사용할 경우 YoutubeGUIPlayerComponent를 사용하고, World에 배치할 경우 YoutubePlayerWorldComponent를 사용합니다. UI로 사용한다면 영상은 배치한 곳에 고정되므로, 맵을 돌아다니더라도 유저가 보고 있는 화면의 특정 위치에서 움직이지 않습니다. World에서 영상을 사용한다면 배치한 위치에 고정되며, 기본적으로 플레이어가 움직여도 영상은 따라오지 않습니다. [gif](1639617553145463b36f7117043408f8c0fea93f888fe)

> Tip 연결한 영상을 바로 재생으로 설정했더라도, 테스트 시 재생됩니다. 

#### YoutubePlayerWorldComponent 프로퍼티

[{"프로퍼티":"Urls","설명":"재생할 영상의 주소를 입력합니다. Size: 입력한 수만큼 영상의 Url을 입력할 수 있습니다."},{"프로퍼티":"LocalScale","설명":"영상의 크기를 설정합니다."},{"프로퍼티":"ShowController","설명":"영상을 제어할 수 있는 UI를 보여줍니다."},{"프로퍼티":"ControllerScale","설명":"영상을 제어하는 재생 바와 버튼의 크기를 설정합니다."},{"프로퍼티":"IgnoreMapLayerCheck","설명":"활성화하면 맵 레이어에 노출되는 이름으로 SortingLayer를 지정할 수 있는 기능을 끕니다."},{"프로퍼티":"PlayOnAwake","설명":"활성화 시 월드에 입장하면 영상이 자동 재생됩니다."},{"프로퍼티":"Loop","설명":"영상을 반복 재생합니다."},{"프로퍼티":"Shuffle","설명":"활성화 시 영상의 재생 순서를 섞어 재생합니다."},{"프로퍼티":"Volum","설명":"음량 크기를 설정합니다. 0부터 1 사이의 값을 사용할 수 있습니다."},{"프로퍼티":"PlaySpeed","설명":"영상의 재생 속도를 설정합니다. 0.5부터 3 사이의 값을 사용할 수 있습니다."},{"프로퍼티":"SortingLayer","설명":"SortingLayer에 따라서 2개 이상의 YoutubePlayer가 겹쳤을 때 보이는 우선순위가 달라집니다."},{"프로퍼티":"OrderInLayer","설명":"레이어를 정렬합니다. 한 레이어 안에 엔티티들의 순서를 정할 수 있습니다."}]

#### YoutubePlayerGUIComponent 프로퍼티

[{"프로퍼티":"Loop","설명":"활성화 시 영상을 반복 재생합니다."},{"프로퍼티":"PlayOnAwake","설명":"활성화 시 월드에 입장하면 영상이 자동 재생됩니다."},{"프로퍼티":"Shuffle","설명":"활성화 시 영상 순서를 뒤섞어 재생합니다."},{"프로퍼티":"Urls","설명":"재생할 영상의 주소를 입력합니다. Size: 입력한 수만큼 영상의 Url을 입력할 수 있습니다."},{"프로퍼티":"Volum","설명":"음량 크기를 설정합니다. 0부터 1 사이의 값을 사용할 수 있습니다."},{"프로퍼티":"PlaySpeed","설명":"영상의 재생 속도를 설정합니다. 0.5부터 3 사이의 값을 사용할 수 있습니다."}]

# 월드에 영상 재생하기

  1. [png](1634542479186400047df886b445e959cb1503f312508) Workspace - [png](1634598960433b8c2accd227347b29b0efb94f1320156) NativeModel - [png](16345998699992db91451454e4357a1a26f2fc8d94b61) YoutubePlayerWorld를 선택해 배치합니다.  
[png](1638869874178184b15bdee814320afc34e98cac68bdf)
  2. Size에 2 입력하고, 영상 Url을 입력합니다. 
     * https://www.youtube.com/watch?v=hvzp4kOtaSw
     * https://youtu.be/3Kom6vz6nic
  3. 프로퍼티 값을 설정한 뒤 [png](1635317657654c59c47ffc44d414db579b8d2fc0715a8) 시작을 눌러 확인합니다.  
[png](163886989504016bb3fe6c3374db3ae0875f29add252f)



# GUI로 영상 재생하기

  1. [png](16345246682320aa0a7ca88a64b33b1bdeddb56363f63) UI에디터로 전환하고, [png](1634542426491c95a16f3ea3e4ffcb78909e4c6bbbd3d) Preset List에서 Youtube 모델을 선택해 화면에 배치합니다.  
[png](1639102697425418eca0a352b42ab89c28ba2ce5e2a15)
  2. Size에 값 2를 입력하고 영상 Url을 입력합니다. 
     * https://youtu.be/3Kom6vz6nic
     * https://www.youtube.com/watch?v=hvzp4kOtaSw
  3. 프로퍼티 값을 설정한 뒤 [png](1635317657654c59c47ffc44d414db579b8d2fc0715a8) 시작을 눌러 확인합니다.  
[png](1638871880838e765a1ff0c754da9b2396f95522c81c0)



# 함수 활용 예시

월드에 입장하면 영상을 바로 00:20초부터 재생을 시작하게 만들고, 재생 중에 특정 키를 입력할 때 함수가 동작하게 만듭니다. YoutubePlayerWorldComponent와 YoutubePlayerGUIComponent의 함수 사용법은 동일합니다. 예시는 YoutubePlayerWorldComponent가 기준입니다. 예시 Url: https://www.youtube.com/watch?v=9pL_b1fl9LQ&t=1s

  1. YoutubePlayerController 스크립트 컴포넌트를 만들어, 배치한 Youtube 모델에 추가합니다.  
[png](16391219258191430dbcee5304feb98a12e950231b349)
  2. 키보드의 특정 키가 눌렸을 때 영상을 제어하는 스크립트를 작성합니다. 
     * 월드에 입장하면 영상의 00:20 지점부터 자동 재생
     * P 입력: 영상 멈춤
     * L 입력: 영상 일시 정지, 재생
     * 숫자 0 입력: 영상의 처음으로 돌아가 재생 시작



$$youtube /wKeMhEK2p8Q $$

> 더 알아보기 모든 함수의 실행 제어는 ClientOnly로 설정했기 때문에 특정 시간에 모든 유저가 같은 장면을 보고 있지 않습니다. 만약 모든 유저가 같은 화면을 보길 원한다면 동기화 작업이 필요합니다.

#### 특정 지점에서 영상 시작

영상의 재생 지점을 00:20으로 지정하고 플레이합니다.
    
    
    @Component
    script YoutubePlayerJumper extends Component
        @ExecSpace("ClientOnly")
        method void Jump(integer timeInSeconds, string userId)
        self.Entity.YoutubePlayerWorldComponent:Jump(20.0)
        end
    end
    

#### P키를 눌러 영상 멈추기
    
    
    @Component
    script YoutubePlayerPauser extends Component
        @ExecSpace("ClientOnly")
        method void Pause(string userId)
        self.Entity.YoutubePlayerWorldComponent:Pause()
        end
    end
    

#### 0키를 눌러 영상 처음부터 재생하기
    
    
    @Component
    script YoutubePlayerInitializer extends Component
        @ExecSpace("ClientOnly")
        method void PlayFromStart()
        self.Entity.YoutubePlayerWorldComponent:Play()
        self.Entity.YoutubePlayerWorldComponent:Jump(0)
        end
    end
    

#### L 키를 눌러 영상 일시 정지, 다시 재생하기
    
    
    @Component
    script YoutubePlayerControl extends Component
        @ExecSpace("ClientOnly")
        method void PlayPause(string userId)
        self.Entity.YoutubePlayerCommonComponent:PlayPause()
        end
    end
    

#### KeyDownEvent 활용

키 입력을 위해선 EntityEventHandler에 아래와 같이 `KeyDownEvent`를 활용해야합니다. 특정 키가 입력되었을 때 실행될 함수를 이벤트 핸들러에 작성합니다.
    
    
    @Component
    script KeyPlaybackController extends Component
        @EventSender("Service", "InputService")
        handler HandleKeyDownEvent(KeyDownEvent event)
        --------------- Native Event Sender Info ----------------
        -- Sender: InputService
        -- Space: Client
        ---------------------------------------------------------
    
        -- Parameters
        -- local key = event.key
        ---------------------------------------------------------
    
        local keyStr = tostring(key)
        if keyStr == "P" then
            self:Pause()
        elseif keyStr == "Alpha0" or keyStr == "Keypad0" then
            self:PlayFromStart()
        elseif keyStr == "L" then
            self:PlayPause()
        end
        end
    end