Playback source

Available in Classic and VPC

Playback source explains how to write a script code and apply a player and how to play several videos in one player.

Basic settings

You can apply a player that displays control bar button UI with a simple script code as follows:

Examples are as follows:

// Video (MP4)
new ncplayer('video4', {
  playlist: 'https://CDNdomain/example_video_01.mp4',
});

Multiple video playback

You can play multiple videos in a row sending several playback sources with the playlist property. You can also override several video playback features and configure the next video to be played as a dynamic playlist.

Basic features

You can implement basic features to play several videos continuously.

Examples are as follows:

// Video (MP4)
new ncplayer('video1', {
  playlist: [
    { 
			file: 'https://CDNdomain/example_video_01.mp4',
			poster: 'https://CDNdomain/example_image_01.png' 
		},
    { 
			file: 'https://CDNdomain/example_video_02.mp4',
			poster: 'https://CDNdomain/example_image_02.png'  
		},
    { 
			file: 'https://CDNdomain/example_video_03.mp4/index.m3u8', 
			poster: 'https://CDNdomain/example_image_03.png'  
		}
  ],
});

Redefine features (Override)

You can implement the features that you want by overriding the playlist property nextSource that can play several videos continuously with the prevSource property. Examples are as follows:

// Video (MP4)
const player = new ncplayer('video', {
    playlist: [
        { 
            file: 'https://CDNdomain/example_video_01.mp4',
            poster: 'https://CDNdomain/example_image_01.png',
        }
    ],
    override:{
        nextSource(){
            // A customer implements the next video
            // location.href='next url'
        },
        prevSource(){
            // A customer implements the previous video
            // location.href='prev url'
        }
    }
});

Dynamic playlist composition

Provide the features that can dynamically add the next video to play after completing video playback. For example, you can configure recommended videos to be displayed with thumbnails as follows:

Examples are as follows:

// Video (MP4)
const player = new ncplayer('video', {
    playlist: [
        { 
            file: 'https://CDNdomain/example_video_01.mp4',
            poster: 'https://CDNdomain/example_image_01.png',
        }
    ]
});


// Add next video
player.addNextSource({
    file: 'https://CDNdomain/example_video_022.mp4',
    poster: 'https://CDNdomain/example_image_022.png',
})

// Add next video
player.addNextSource({
    file: 'https://CDNdomain/example_video_033.mp4',
    poster: 'https://CDNdomain/example_image_033.png',
})

// Add previous video
player.addPrevSource({
    file: 'https://CDNdomain/example_video_00.mp4',
    poster: 'https://CDNdomain/example_image_00.png',
})