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.

Note

For descriptions of properties to set options, see Player settings.

Basic settings

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

Note

Playback Sources support in mp4, hls, and dash formats.

vpe-example-source_player_ko

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.

Note

If the autostart property is false, the next video don't play automatically, and the "next" and "previous" buttons are displayed. See autoplayfor examples of the autostart property.

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:

vpe-example-source_playlist

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',
})