iOS 환경

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

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

참고

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

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

SDK 설치 및 환경 구성

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

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

플레이어 적용 및 설정

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

1. 초기화
2. 플레이어 설정
3. 이벤트 설정

1. 초기화

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

import NCPlayerSDK
...
class ViewController: UIViewController, NCPlayerDelegate{
    ...

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
			
        NCPlayer.shared.delegate = self
    }
}

2. 플레이어 설정

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

네이버 클라우드 플랫폼 콘솔의 Region 메뉴와 Platform 메뉴에서 이용 중인 환경을 클릭해 주십시오.
Services > Media > Video Player Enhancement 메뉴를 차례대로 클릭해 주십시오.
Video Player Management 메뉴를 클릭해 주십시오.
설정할 플레이어의 [SDK 주소] 버튼을 클릭해 주십시오.
Player SDK 주소 팝업 창이 나타나면 SDK 주소에서 access_key 값을 확인해 주십시오.
Xcode에서 NCPlayerView를 참조하는 Class와 UIView를 생성해 주십시오.

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

플레이어 설정과 이 가이드의 플레이어 설정 스크립트를 참고해 주십시오.

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 플레이어에서 발생하는 이벤트를 바인딩하여 활용할 수 있습니다. 방법은 다음과 같습니다.

NCPlayerNetworkStatus 메소드를 이용하여 디바이스의 네트워크 상태를 확인해 주십시오.

import NCPlayerSDK
...
class ViewController: UIViewController, NCPlayerDelegate{
...

    func NCPlayerNetworkStatus(state: String) {
    // state: satisfied = 이상 없음 (ONLINE)
    // state: unsatisfied = 문제 발생 (OFFLINE 혹은 통신 장애 발생)
    // state: requiresConnection = 현재 사용할 수 없지만 인터넷을 연결하면 사용 가능
    }
}

설정하고자 하는 이벤트에 따라 설정 방법을 확인해 주십시오.

가로 모드 활성화 이벤트

디바이스를 가로로 전환 시 이벤트를 발생시키려면 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
    }
}

}