Web environment

Available in Classic and VPC

This section explains how to apply the Video Player Enhancement player and configure player options in a web environment.

Apply player

To apply a player to a web page:

1. Navigate toMenu > Services > Media > Video Player Enhancement from the NAVER Cloud Platform console.
2. Click the Video Player Management menu.
3. In the player list, click the [SDK address] button of the player you want to apply to the web environment.
4. Select the service environment to apply the player to, and then click the [Copy] button next to SDK address.
   • The SDK address of the player is copied to the clipboard.
5. Add the copied SDK address to the HTML of the web page as follows:

   <script src="플레이어의 SDK 주소"></script>
   

Set up player

Player options can be easily configured in the NAVER Cloud Platform console (see Player settings), or you can customize the player by configuring individual properties.
The basic structure of the player is as follows:

new ncplayer("HTMLElement id" , {
    playlist:[                
        { file:"http://example.com/myVideo.mp4" } // Playback source
    ]
});

Player options

The customizable options are as follows:

Change default icon

You can modify the script code to change default icons. The example is as follows:

// Video (MP4)
const player = new ncplayer('video', {
    playlist: [
        { 
            file: 'https://CDNdomain/example_video_01.mp4',
            poster: 'https://CDNdomain/example_image_01.png',
        }
    ],
    controlBtn:{
    play:true,
    fullscreen:true,
    volume:true,
    times:true,
    pictureInPicture:true,
    setting:true,
    subtitle:true,
},

icon:{
        bigPlay:"https://CDNdomain/icon/play-circle-fill.svg", // Big play button before autoplay
        play:"https://CDNdomain/icon/play-fill.svg", // Play
        use:"https://CDNdomain/icon/pause-fill.svg", // Pause
        prev:"https://CDNdomain/icon/skip-back-fill.svg", // Previous video
        next:"https://CDNdomain/icon/skip-forward-fill.svg", // Next video
        replay:"https://CDNdomain/icon/arrow-clockwise-fill.svg", // Replay
        subtitle:"https://CDNdomain/icon/closed-captioning-fill.svg", // Subtitle on
        subtitleOff:"https://CDNdomain/icon/closed-captioning.svg", // Subtitle off
        fullscreen:"https://CDNdomain/icon/corners-out.svg", // Switch to full screen
        fullscreenExit:"https://CDNdomain/icon/corners-in.svg", // Exit full screen
        volumeFull:"https://CDNdomain/icon/speaker-simple-high-fill.svg", // Maximum volume
        volumeMute:"https://CDNdomain/icon/speaker-simple-x-fill.svg", // Volume 0, Mute
        volumeMid:"https://CDNdomain/icon/speaker-simple-low-fill.svg", // Medium volume
        pip:"https://CDNdomain/icon/picture-in-picture-fill.svg", // PIP
        setting:"https://CDNdomain/icon/gear-fill.svg", // Settings
   }
});

Override Picture In Picture feature

You can replace the provided PIP feature with a floating player feature within the website. The example is 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:{
        pip:{
            on(){
                window.player.uiHidden(); // Hide all player UI
                // Write code to execute the custom floating player
                // Example: floatingModeStart()
            },
            off(){
                window.player.uiVisible(); // Show all player UI
                // Write code to stop the custom floating player
                // Example: floatingModeStop()
            }
        }
    }
});

Hide floating player UI

If the PIP feature is replaced with a floating player, you can set whether to display the floating player's control UI.
This is a mandatory method to consider when implementing a floating player. In addition to the controlBarActive/controlBarDeactive methods, you can use the uiHidden method to hide all UI or the uiVisible method to display all UI.
The example is as follows:

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


// Hide control bar UI
player.uiHidden();

// Show control bar UI
player.uiVisible();

Playlist

The properties for setting the playback source are as follows:

Method

The Video Player Enhancement service provides various methods to play a video and implement various features.

The script to create a player and play video is as follows:

let player = new ncplayer('myElement', {
    playlist: [
        { 
            file:"http://example.com/myVideo.mp4",
            poster:"http://example.com/myVideoThumb.png" 
        }
    ]
});
player.play();

Supported methods

Methods supported by the Video Player Enhancement service are as follows:

Event

The Video Player Enhancement service provides various events, and allows you to configure events triggered when clicking metadata.

Events can be received as follows:

let player = new ncplayer('myElement', {
    playlist: [
        { 
            file:"http://example.com/myVideo.mp4",
            poster:"http://example.com/myVideoThumb.png" 
        }
    ]
});

player.on('play',(e)=>{
    console.log('Played.',e);
})

Supported events

The events supported by the Video Player Enhancement service are as follows:

timeupdate script
The script for the timeupdate event, along with descriptions of each property, is as follows:

let player = new ncplayer('myElement', {
    playlist: [
        { 
            file:"http://example.com/myVideo.mp4",
            poster:"http://example.com/myVideoThumb.png" 
        }
    ]
});

player.on('timeupdate',(data)=>{
    console.log('Total duration of the video (duration): ',data.duration);
    console.log('Current playback position (currentTime): ',data.currentTime);
    console.log('Current playback percentage (percent): ',data.percent);
    console.log('Accumulated playback time (viewingTime): ',data.viewingTime);
    console.log('playback source type (sourceType): ',data.sourceType); // Playback source type(vod, live)
})

prevTrack script
The script for the prevTrack event, along with descriptions of each property, is as follows:

let player = new ncplayer('myElement', {
    playlist: [
        { 
            file:"http://example.com/myVideo.mp4",
            poster:"http://example.com/myVideoThumb.png" 
        },
        { 
            file:"http://example.com/myVideo2.mp4",
            poster:"http://example.com/myVideoThumb2.png" 
        }
    ]
});

player.on('prevTrack',(data)=>{
    console.log('prevTrack' , data);
})

nextTrack script
The script for the nextTrack event, along with descriptions of each property, is as follows:

let player = new ncplayer('myElement', {
    playlist: [
        { 
            file:"http://example.com/myVideo.mp4",
            poster:"http://example.com/myVideoThumb.png" 
        },
        { 
            file:"http://example.com/myVideo2.mp4",
            poster:"http://example.com/myVideoThumb2.png" 
        }
    ]
});

player.on('nextTrack',(data)=>{
    console.log('nextTrack' , data);
})