재생 소스

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

재생 소스에서는 스크립트 코드를 작성하여 플레이어를 적용하는 방법과 하나의 플레이어로 여러 개의 영상을 재생하는 방법을 설명합니다.

기본 설정

간단한 스크립트 코드로 다음과 같이 컨트롤바 버튼 UI가 표시되는 플레이어를 적용할 수 있습니다.

예제는 다음과 같습니다.

// 동영상(MP4)
new ncplayer('video4', {
  playlist: 'https://CDN도메인/example_video_01.mp4',
});

여러 영상 재생

playlist 속성으로 여러 개의 재생 소스를 전달하여 여러 개의 영상을 연속하여 재생할 수 있습니다. 또한, 여러 영상 재생 기능을 재정의(Override)할 수 있으며, 다음 재생할 영상을 동적 플레이리스트로 구성할 수 있습니다.

기본 기능

여러 개의 영상을 연속으로 재생하는 기본 기능을 구현할 수 있습니다.

예제는 다음과 같습니다.

// 동영상(MP4)
new ncplayer('video1', {
  playlist: [
    { 
			file: 'https://CDN도메인/example_video_01.mp4',
			poster: 'https://CDN도메인/example_image_01.png' 
		},
    { 
			file: 'https://CDN도메인/example_video_02.mp4',
			poster: 'https://CDN도메인/example_image_02.png'  
		},
    { 
			file: 'https://CDN도메인/example_video_03.mp4/index.m3u8', 
			poster: 'https://CDN도메인/example_image_03.png'  
		}
  ],
});

기능 재정의 (Override)

여러 개의 영상을 연속하여 재생할 수 있는 playlist 속성에 nextSource, prevSource 속성을 Override하여 원하는 기능을 구현할 수 있습니다. 예제는 다음과 같습니다.

// 동영상(MP4)
const player = new ncplayer('video', {
    playlist: [
        { 
            file: 'https://CDN도메인/example_video_01.mp4',
            poster: 'https://CDN도메인/example_image_01.png',
        }
    ],
    override:{
        nextSource(){
            // 고객사 다음 영상 기능 구현
            // location.href='next url'
        },
        prevSource(){
            // 고객사 이전 영상 기능 구현
            // location.href='prev url'
        }
    }
});

동적 플레이리스트 구성

영상 재생이 완료된 후 다음에 재생할 영상을 동적으로 추가할 수 있는 기능을 제공합니다. 예를 들어 다음과 같이 추천 영상을 썸네일과 함께 안내하도록 구성할 수 있습니다.

예제는 다음과 같습니다.

// 동영상(MP4)
const player = new ncplayer('video', {
    playlist: [
        { 
            file: 'https://CDN도메인/example_video_01.mp4',
            poster: 'https://CDN도메인/example_image_01.png',
        }
    ]
});


// 다음 영상 추가
player.addNextSource({
    file: 'https://CDN도메인/example_video_022.mp4',
    poster : 'https://CDN도메인/example_image_022.png',
})

// 다음 영상 추가
player.addNextSource({
    file: 'https://CDN도메인/example_video_033.mp4',
    poster : 'https://CDN도메인/example_image_033.png',
})

// 이전 영상 추가
player.addPrevSource({
    file: 'https://CDN도메인/example_video_00.mp4',
    poster : 'https://CDN도메인/example_image_00.png',
})