Web 環境

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