- 인쇄
- PDF
iOS 환경
- 인쇄
- PDF
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. 초기화
다음과 같이 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
}
}
}