For web

Available in Classic and VPC

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

Apply player

The following shows how to apply a player to a web page:

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.
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 in 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://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", // Playback
        use:"https://CDNdomain/icon/pause-fill.svg", // Pause
        prev:"https://CDNdomain/icon/skip-back-fill.svg", // the previous video
        next:"https://CDNdomain/icon/skip-forward-fill.svg", // the 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
   }
});

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://CDNdomain/example_video_01.mp4',
            poster: 'https://CDNdomain/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://CDNdomain/example_video_01.mp4',
            poster: 'https://CDNdomain/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 are 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);
})