Web environment

Available in Classic and VPC

The Web environment describes how to apply players of Video Player Enhancement and set player options in the web environment.

Apply player

To apply a player to a web page, follow these steps:

1. Click the environment you are using in the Region menu and the Platform menu on the NAVER Cloud Platform console.
2. Click Services > Media > Video Player Enhancement in order.
3. Click the Video Player Management menu.
4. Click the [SDK address] button for the player to apply to the web environment in the player’s list.
5. Click the [Copy] button under SDK address after choosing a service environment that applies a player to.
   • The SDK address of the player is copied to the clipboard.
6. Add the copied SDK address to the HTML of the web page as follows:

Set up player

Player options can be easily preset on the NAVER Cloud Platform console (see Player settings), and you can also customize the player by setting each property.
The basic structure of the player is as follows:

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

Player option

The customizable options are as follows:

Change basic icons

You can edit script code to change basic icons. Examples are as follows:

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

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

Redefinition of Picture In Picture feature (Override)

You can change the provided PIP features to floating player features within the website. Examples are as follows:

// Video (MP4)
const player = new ncplayer('video', {
    playlist: [
        { 
            file: 'https://CDN도메인/example_video_01.mp4',
            poster: 'https://CDN도메인/example_image_01.png',
        }
    ],
    override:{
        pip:{
            on(){
                window.player.uiHidden(); // Hide all UI of player
                // Write an executable code for customer’s floating player
                // \<example> floatingModeStart()
            },
            off(){
                window.player.uiVisible(); // Display all UI of player
                // Write a completion code for customer’s floating player
                // \<example> floatingModeStop()
            }
        }
    }
});

Hide UI of floating player

If PIP features are changed to floating player, you can set whether to display control UI of floating display.
This feature is the method that you must consider when implementing a floating player. Other than the controlBarActive/controlBarDeactive methods, you can use the uiHidden method to hide all UI or the uiVisible method to display all UI.
Examples are as follows:

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


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

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

Playlist

The property information to set the playback source is as follows:

Method

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

The script to create and play the player 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 to support in the Video Player Enhancement service are as follows:

Event

The Video Player Enhancement service provides various events and configures events occurring 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 to support in the Video Player Enhancement are as follows:

timeupdate script
The followings are the explanation on script and properties for the timeupdate event:

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 followings are the details on scripts and each property for prevTrack event:

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 following is the explanation on script and each property for the nextTrack event:

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);
})