ウェブ環境

Classic/VPC環境で利用できます。

Web環境では、ウェブ環境で Video Player Enhancementのプレイヤーを適用する方法と、プレイヤーのオプションを設定する方法について説明します。

プレイヤー適用

ウェブページにプレイヤーを適用する方法は、次の通りです。

1. NAVERクラウドプラットフォームコンソールの Region メニューや Platform メニューから利用中の環境をクリックします。
2. Services > Media > Video Player Enhancement メニューを順にクリックします。
3. Video Player Management メニューをクリックします。
4. プレイヤーリストからウェブ環境に適用するプレイヤーの [SDKアドレス] ボタンをクリックします。
5. プレイヤーを適用するサービス環境を選択し、 SDKアドレス の [コピー] ボタンをクリックします。
   • そのプレイヤーの SDKアドレスがクリップボードにコピーされます。
6. コピーした SDKアドレスを次のようにウェブページの HTMLに追加します。

プレイヤー設定

プレイヤーのオプションは NAVERクラウドプラットフォームコンソールで簡単に事前に設定でき(プレイヤー設定を参照)、それぞれのプロパティを設定してプレイヤーをカスタマイズできます。
プレイヤーの基本構造は、次の通りです。

new ncplayer("HTMLElement id" , {
    playlist:[                
        { file:"http://example.com/myVideo.mp4" } // 再生ソース
    ]
});

プレイヤーオプション

カスタマイズできるオプションは、次の通りです。

デフォルトアイコンの変更

スクリプトコードを修正してデフォルトアイコンを変更できます。ユースケースは次の通りです。

// 動画(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", // 自動再生前の大きなプレイボタン
        play:"https://CDNドメイン/icon/play-fill.svg", // 再生
        use:"https://CDNドメイン/icon/pause-fill.svg", // 一時停止
        prev:"https://CDNドメイン/icon/skip-back-fill.svg", // 前の動画
        next:"https://CDNドメイン/icon/skip-forward-fill.svg", // 次の動画
        replay:"https://CDNドメイン/icon/arrow-clockwise-fill.svg", // もう一度見る
        subtitle:"https://CDNドメイン/icon/closed-captioning-fill.svg", // 字幕を有効化
        subtitleOff:"https://CDNドメイン/icon/closed-captioning.svg", // 字幕を無効化
        fullscreen:"https://CDNドメイン/icon/corners-out.svg", // フルスクリーンに切り替え
        fullscreenExit:"https://CDNドメイン/icon/corners-in.svg", // フルスクリーンを解除
        volumeFull:"https://CDNドメイン/icon/speaker-simple-high-fill.svg", // ボリューム最大
        volumeMute:"https://CDNドメイン/icon/speaker-simple-x-fill.svg", // ボリューム0、ミュート
        volumeMid:"https://CDNドメイン/icon/speaker-simple-low-fill.svg", // ボリューム中間
        pip:"https://CDNドメイン/icon/picture-in-picture-fill.svg", // PIP
        setting:"https://CDNドメイン/icon/gear-fill.svg", // 設定
   }
});

Picture In Picture機能のオーバーライド(Override)

提供される PIP機能をウェブサイト内のフローティングプレイヤー機能に変更できます。ユースケースは次の通りです。

// 動画(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(); // プレイヤーのすべての UIを隠す
                // 顧客会社のフローティングプレイヤーの実行コードを作成
                // 例) floatingModeStart()
            },
            off(){
                window.player.uiVisible(); // プレイヤーのすべての UIを表示
                // 顧客会社のフローティングプレイヤーの終了コードを作成
                // 例) floatingModeStop()
            }
        }
    }
});

フローティングプレイヤーの UIを隠す

PIP機能をフローティングプレイヤーに変更した場合、フローティングプレイヤーのコントロール UIの表示有無を設定できます。
この機能はフローティングプレイヤーの実装時に必ず検討すべきメソッドであり、controlBarActive/controlBarDeactiveメソッドとは別に uiHidden メソッドを使用してすべての UIを隠したり、uiVisibleメソッドを使用してすべての UIを表示するように設定できます。
ユースケースは次の通りです。

// 動画(MP4)
const player = new ncplayer('video', {
    playlist: [
        { 
            file: 'https://CDNドメイン/example_video_01.mp4',
            poster: 'https://CDNドメイン/example_image_01.png',
        }
    ]
});


//コントロール UIを隠す
player.uiHidden();

//コントロール UIを表示
player.uiVisible();

Playlist

再生ソースの設定に関するプロパティ情報は、次の通りです。

Method

Video Player Enhancementサービスは、動画を再生して様々な機能を実現できる様々なメソッドを提供します。

プレイヤーを作成して再生するスクリプトは、次の通りです。

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

対応 Method

Video Player Enhancementサービスで対応するメソッドは、次の通りです。

イベント

Video Player Enhancementサービスはユーザーのための様々なイベントを提供し、メタデータをクリックすると発生するイベントを設定できます。

イベントは次のように受け取ることができます。

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

player.on('play',(e)=>{
    console.log('Playしました。',e);
})

対応するイベント

Video Player Enhancementサービスで対応するイベントは、次の通りです。

timeupdateスクリプト
timeupdateイベントに対するスクリプトおよび各プロパティの説明は、次の通りです。

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

player.on('timeupdate',(data)=>{
    console.log('動画全体の長さ(duration) : ',data.duration);
    console.log('現在の再生位置(currentTime) : ',data.currentTime);
    console.log('現在の再生パーセント(percent) : ',data.percent);
    console.log('累計再生時間(viewingTime) : ',data.viewingTime);
    console.log('再生ソースタイプ(sourceType) : ',data.sourceType); // 再生ソースタイプ(vod、live)
})

prevTrackスクリプト
prevTrackイベントに対するスクリプトと各プロパティの説明は、次の通りです。

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スクリプト
nextTrackイベントに対するスクリプトと各プロパティの説明は、次の通りです。

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