iOS 환경
    • PDF

    iOS 환경

    • PDF

    기사 요약

    Classic/VPC 환경에서 이용 가능합니다.

    iOS 환경에서는 iOS 전용 플레이어 개발을 위한 Video Player Enhancement iOS SDK 사용 방법과 플레이어 적용 및 옵션 설정 방법을 설명합니다.

    참고

    iOS용 Video Player Enhancement SDK를 사용하려면 Standard 요금제를 이용해야 하며 다음과 같은 사양이 요구됩니다.

    • 최소 사양: iOS 14.0 이상
    • 개발 환경: Xcode

    SDK 설치 및 환경 구성

    SDK를 설치하고 프레임워크를 추가하는 방법은 다음과 같습니다.

    1. 네이버 클라우드 플랫폼 콘솔의 Region 메뉴와 Platform 메뉴에서 이용 중인 환경을 클릭해 주십시오.
    2. Services > Media > Video Player Enhancement 메뉴를 차례대로 클릭해 주십시오.
    3. Video Player Management 메뉴를 클릭해 주십시오.
    4. 플레이어 목록에서 SDK를 다운로드할 플레이어의 [SDK 주소] 버튼을 클릭해 주십시오.
    5. 모바일 네이티브 SDKs 다운로드[IOS] 버튼을 클릭해 주십시오.
      • 압축 파일이 다운로드됩니다.
    6. Xcode를 실행한 후 추가하려는 프로젝트의 Targets > General 메뉴를 클릭해 주십시오.
    7. Framework, Libraries, and Embedded Content에 'NCPlayerSDK.xcframework'를 Embed & Sign 타입으로 추가해 주십시오.

    플레이어 적용 및 설정

    플레이어를 적용하고 옵션을 설정하려면 다음 절차를 진행해 주십시오.

    1. 초기화

    다음과 같이 NCPlayerSDK 인스턴스를 초기화하고 Delegate를 설정해 주십시오.

    import NCPlayerSDK
    ...
    class ViewController: UIViewController, NCPlayerDelegate{
        ...
    
        override func viewDidAppear(_ animated: Bool) {
            super.viewDidAppear(animated)
    			
            NCPlayer.shared.delegate = self
        }
    }
    

    2. 플레이어 설정

    플레이어를 설정하는 방법은 다음과 같습니다.

    1. 네이버 클라우드 플랫폼 콘솔의 Region 메뉴와 Platform 메뉴에서 이용 중인 환경을 클릭해 주십시오.

    2. Services > Media > Video Player Enhancement 메뉴를 차례대로 클릭해 주십시오.

    3. Video Player Management 메뉴를 클릭해 주십시오.

    4. 설정할 플레이어의 [SDK 주소] 버튼을 클릭해 주십시오.

    5. Player SDK 주소 팝업 창이 나타나면 SDK 주소에서 access_key 값을 확인해 주십시오.
      vpe-ios_key_ko

    6. Xcode에서 NCPlayerView를 참조하는 Class와 UIView를 생성해 주십시오.

    7. 플레이어의 옵션을 설정해 주십시오.

      • 플레이어 설정과 이 가이드의 플레이어 설정 스크립트를 참고해 주십시오.
      class player:NCPlayerView{}
      
      class ViewController: UIViewController, NCPlayerDelegate {  
      @IBOutlet weak var playerView: player?
      }
      override func viewDidAppear(_ animated: Bool) {
          super.viewDidAppear(animated)
      
          // SDK 초기화
          //licenseKey = access_key
          let licenseKey = "{access_key}"
      
          // 플레이어 옵션(콘솔에서 만들어진 스크립트 코드 사용)
          let playerOptions = """
          {
              "playlist":[
                  {
                      "file":"https://CDN도메인/example_video_01.mp4",
                      "poster":"https://CDN도메인/example_video_01.png",
                  }
              ],
              "autostart":true,
              }
         
          """
        
          NCPlayer.shared.initialize(licenseKey: licenseKey)
          NCPlayer.shared.delegate = self
      
          // 실행
          playerView?.play(playerOptions)
          
      }
      

    3. 이벤트 설정

    Player Event API를 통해 Video Player Enhancement 플레이어에서 발생하는 이벤트를 바인딩하여 활용할 수 있습니다. 방법은 다음과 같습니다.

    1. NCPlayerNetworkStatus 메소드를 이용하여 디바이스의 네트워크 상태를 확인해 주십시오.
      import NCPlayerSDK
      ...
      class ViewController: UIViewController, NCPlayerDelegate{
      ...
      
          func NCPlayerNetworkStatus(state: String) {
          // state: satisfied = 이상 없음 (ONLINE)
          // state: unsatisfied = 문제 발생 (OFFLINE 혹은 통신 장애 발생)
          // state: requiresConnection = 현재 사용할 수 없지만 인터넷을 연결하면 사용 가능
          }
      }
      
    2. 설정하고자 하는 이벤트에 따라 설정 방법을 확인해 주십시오.

    가로 모드 활성화 이벤트

    디바이스를 가로로 전환 시 이벤트를 발생시키려면 NCPlayerIsLandscape 메소드를 이용하여 다음과 같이 설정해 주십시오.

    import NCPlayerSDK
    ...
    class ViewController: UIViewController, NCPlayerDelegate{
        ...
    
        func NCPlayerIsLandscape(state: Bool) {
    
        }
    }
    

    스크린 캡처 감지 이벤트(iOS 전용)

    스크린 캡처 시 이벤트를 발생시키려면 NCPlayerIsCaptured 메소드를 이용하여 다음과 같이 설정해 주십시오.

    import NCPlayerSDK
    ...
    class ViewController: UIViewController, NCPlayerDelegate{
        ...
    	
        func NCPlayerIsCaptured(state: Bool) {
    
        }
    }
    

    OS 화면 녹화 감지 이벤트(iOS 전용)

    화면 녹화 시 이벤트를 발생시키려면 NCPlayerIsRecording 메소드를 이용하여 다음과 같이 설정해 주십시오.

    import NCPlayerSDK
    ...
    class ViewController: UIViewController, NCPlayerDelegate{
        ...
    	
        func NCPlayerIsRecording(state: Bool) {
    
        }
    
    }
    

    TimeUpdate 이벤트

    재생 시간 변화 감지 시 이벤트를 발생시키려면 NCPlayerOnTimeUpdate 메소드를 이용하여 다음과 같이 설정해 주십시오.

    import NCPlayerSDK
    ...
    class ViewController: UIViewController, NCPlayerDelegate{
        ...
    	
        func NCPlayerOnTimeUpdate(data: Dictionary<String, Any>?) {
        //data = ["duration": 117, "percent": 31.26565391099825, "viewingTime": 37, "currentTime": 37, "sourceType": vod]
        }
    
    }
    
    참고

    각 속성에 대한 자세한 설명은 timeupdate 스크립트를 참고해 주십시오.

    PrevTrack 이벤트

    플레이리스트 중 이전 영상으로 이동 시 이벤트를 발생시키려면 NCPlayerOnPrevTrack 메소드를 이용하여 다음과 같이 설정해 주십시오.

    import NCPlayerSDK
    ...
    class ViewController: UIViewController, NCPlayerDelegate{
        ...
    	
        func NCPlayerOnPrevTrack(data: Dictionary<String, Any>?) {
    
        }
    }
    
    참고

    각 속성에 대한 자세한 설명은 prevTrack 스크립트를 참고해 주십시오.

    NextTrack 이벤트

    플레이리스트 중 다음 영상으로 이동 시 이벤트를 발생시키려면 NCPlayerOnNextTrack 메소드를 이용하여 다음과 같이 설정해 주십시오.

    import NCPlayerSDK
    ...
    class ViewController: UIViewController, NCPlayerDelegate{
        ...
    	
        func NCPlayerOnNextTrack(data: Dictionary<String, Any>?) {
    
        }
    
    }   
    
    참고

    각 속성에 대한 자세한 설명은 nextTrack 스크립트를 참고해 주십시오.

    컨트롤바 활성화 이벤트

    플레이어에서 컨트롤바 활성화/비활성화 시 이벤트를 발생시키려면 NCPlayerOnControlbarActive 메소드를 이용하여 다음과 같이 설정해 주십시오.

    import NCPlayerSDK
    ...
    class ViewController: UIViewController, NCPlayerDelegate{
        ...
    	
        func NCPlayerOnControlbarActive(active: Bool) {
            // active: true , false
        }
    }
    

    재생 이벤트

    플레이어에서 영상 재생 시 이벤트를 발생시키려면 NCPlayerOnPlay 메소드를 이용하여 다음과 같이 설정해 주십시오.

    import NCPlayerSDK
    ...
    class ViewController: UIViewController, NCPlayerDelegate{
        ...
    	
        func NCPlayerOnPlay() {
    
        }
    }
    

    일시 정지 이벤트

    플레이어에서 영상 일시 정지 시 이벤트를 발생시키려면 NCPlayerOnPause 메소드를 이용하여 다음과 같이 설정해 주십시오.

    import NCPlayerSDK
    ...
    class ViewController: UIViewController, NCPlayerDelegate{
        ...
    	
        func NCPlayerOnPause() {
    
        }
    }
    

    재생 완료 이벤트

    플레이어에서 영상 재생 완료 시 이벤트를 발생시키려면 NCPlayerOnEnd 메소드를 이용하여 다음과 같이 설정해 주십시오.

    import NCPlayerSDK
    ...
    class ViewController: UIViewController, NCPlayerDelegate{
        ...
    	
        func NCPlayerOnEnd() {
    
        }
    }
    

    전체 화면 이벤트

    전체 화면 전환 시 이벤트를 발생시킬 수 있으며, 디바이스 회전 방향에 따라 전체 화면으로 전환하도록 설정할 수 있습니다.

    플레이어를 전체 화면으로 전환 시 이벤트를 발생시키려면 NCPlayerOnFullscreen 메소드를 이용하여 다음과 같이 설정해 주십시오.

    import NCPlayerSDK
    ...
    class ViewController: UIViewController, NCPlayerDelegate{
        ...
    
        // 전체 화면이 꺼졌을 때 발생하는 이벤트
        func NCPlayerOnFullscreenOff() {
    
        }
    
        // 전체 화면이 되었을 때 발생하는 이벤트
        func NCPlayerOnFullscreenOn() {
    
        }
    
        // 전체 화면이 되었을 때 구분 true/false
        func NCPlayerOnFullscreen(state: Bool?) {
    
        }
    }
    

    버튼 또는 디바이스의 회전 방향을 감지하여 전체 화면으로 전환하도록 설정하려면 NCPlayerRequestOrientation 메소드를 다음과 같이 설정해 주십시오.

    import NCPlayerSDK
    ...
    class ViewController: UIViewController, NCPlayerDelegate{
    
        var currentOrientationMask: UIInterfaceOrientationMask = .portrait
        var currentOrientation: UIInterfaceOrientation = .portrait
        
            // 가로로 돌렸을 때 전체 화면 및 세로로 돌렸을 때 되돌아오기
            func NCPlayerRequestOrientation(orientation: String) {
                if (orientation == "landscape") {
                    currentOrientationMask = .landscape
                    currentOrientation = .landscapeRight
                } else {
                    currentOrientationMask = .portrait
                    currentOrientation = .portrait
                }
                applyOrientation(orientation: currentOrientation)
            }
            
            override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
                return currentOrientationMask;
        }
        override var preferredInterfaceOrientationForPresentation: UIInterfaceOrientation {
            return currentOrientation;
        }
        override var prefersStatusBarHidden: Bool {
            return currentOrientation.isLandscape
        }
    }
    extension NSLayoutConstraint {
        func applyAspectRatio(view: UIView, ratio: CGFloat) -> NSLayoutConstraint {
            let newConstraint = NSLayoutConstraint(item: self.firstItem!, attribute: self.firstAttribute, relatedBy: self.relation, toItem: self.secondItem, attribute: self.secondAttribute, multiplier: ratio, constant: self.constant)
            view.removeConstraint(self)
            view.addConstraint(newConstraint)
            view.layoutIfNeeded()
            return newConstraint
        }
    }
    
    }
    

    디바이스의 회전 방향을 감지하여 전체 화면으로 전환하도록 설정하려면 NCPlayerIsLandscape 메소드를 다음과 같이 설정해 주십시오.

    import NCPlayerSDK
    ...
    class ViewController: UIViewController, NCPlayerDelegate{
        
        var currentOrientationMask: UIInterfaceOrientationMask = .portrait
        var currentOrientation: UIInterfaceOrientation = .portrait
        
        func NCPlayerIsLandscape(state: Bool) {
            if state {
                currentOrientationMask = .landscape
                currentOrientation = UIDevice.current.orientation == .landscapeLeft ? .landscapeRight : .landscapeLeft
            }else{
                currentOrientationMask = .portrait
                currentOrientation = .portrait
            }
            
            applyOrientation(orientation: currentOrientation)
        }
        
        override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
            return currentOrientationMask;
        }
        
        override var preferredInterfaceOrientationForPresentation: UIInterfaceOrientation {
            return currentOrientation;
        }
        
        override var prefersStatusBarHidden: Bool {
            return currentOrientation.isLandscape
        }
    }
    extension NSLayoutConstraint {
        func applyAspectRatio(view: UIView, ratio: CGFloat) -> NSLayoutConstraint {
            let newConstraint = NSLayoutConstraint(item: self.firstItem!, attribute: self.firstAttribute, relatedBy: self.relation, toItem: self.secondItem, attribute: self.secondAttribute, multiplier: ratio, constant: self.constant)
            view.removeConstraint(self)
            view.addConstraint(newConstraint)
            view.layoutIfNeeded()
            return newConstraint
        }
    }
    
    }
    

    이 문서가 도움이 되었습니까?

    What's Next
    Changing your password will log you out immediately. Use the new password to log back in.
    First name must have atleast 2 characters. Numbers and special characters are not allowed.
    Last name must have atleast 1 characters. Numbers and special characters are not allowed.
    Enter a valid email
    Enter a valid password
    Your profile has been successfully updated.