[2024.03] VPE 1.1.1 민간 업데이트

Video Player Enhancement 1.1.1 업데이트 내역 안내

업데이트 내역 안내

1. Hls.js 업데이트

HLS.JS 1.4.5 → 1.4.10

fragParsingError → bufferStalledError 체인 오류 대응
재생 완료시 현재 재생시간 + 버퍼 요청이 전체 영상길이보다 높을 경우 무한 로딩 발생 이슈 대응
해당 무한로딩 감지시 “영상 재생 완료”로 처리하도록 에러처리 추가

2. 커스텀버튼 기능 고도화 추가

// NCP 동영상(MP4)
new ncplayer('video', {
  playlist: [
    {
            file: 'https://CDN도메인/example_video_01.mp4',
            poster : 'https://CDN도메인/example_image_01.png',
        }
  ],
    customBtns:[
            {
                ui:'pc', //적용UI
                position:'right-bottom', //버튼 위치
                icon:'/image/frame-corners-off.svg', //off 상태 이미지
                activeIcon:'/image/frame-corners.svg', //on 상태 이미지
                tooltip:'기본 모드', //off 상태 툴팁
                activeTooltip:'몰입 모드', //on 상태 툴팁
                flow:'left', //버튼 위치
                default:true, // 기본값 true : on / false off
                callback(bool){
                    //고객사 코드
                    console.log('플레이어에 설정된 value boolean', bool)

                }
            },
        ],
});

커스텀 버튼의 active 상태 추가
특정 기능의 on / off를 구현 가능
on / off 상태마다 아이콘 변경 가능
on / off 기본상태 설정 가능
tooltip 추가

커스텀 버튼 추가 예제 코드 바로가기

3.기본 기능 오버라이드 옵션 추가

기본 기능을 고객사가 개발하는 코드로 동작하도록 기능 교체 기능

// NCP 동영상(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 숨김
                    //고객사 플로팅 플레이어 실행코드 작성
                    //ex) floatingModeStart()


                },
                off(){
                    window.player.uiVisible(); //플레이어 모든 UI 보임
                    //고객사 플로팅 플레이어 종료코드 작성
                    //ex) floatingModeStop()
                }
            }
    }
});

EX1) PIP를 플로팅 플레이어 기능으로 변경

기본 기능 오버라이드 예제 코드 바로가기

EX2) 다음/이전 영상 버튼 오버라이드

// NCP 동영상(MP4)
const player = new ncplayer('video', {
  playlist: [
    {
            file: 'https://CDN도메인/example_video_01.mp4',
            poster : 'https://CDN도메인/example_image_01.png',
        }
  ],
    override:{
            nextSource(){
                //고객사 다음 영상 기능 구현
                //location.href='next url'
            },
            prevSource(){
                //고객사 이전 영상 기능 구현
                //location.href='prev url'
            }
    }
});

4. ERROR 오버라이드

기본 에러화면을 고객사가 원하는 코드로 실행하는 방식
오버라이드되면 기본적으로 마지막 재생위치에서 pause상태로 유지
플레이어 오버 레이어로 고객사 에러화면 구현 가능

기본 에러 화면

고객사 오버라이드 에러 화면

오버라이드 예제 코드

// NCP 동영상(MP4)
const player = new ncplayer('video', {
  playlist: [
    {
            file: 'https://CDN도메인/example_video_01.mp4',
            poster : 'https://CDN도메인/example_image_01.png',
        }
  ],
    override:{
            error(err){
                console.log('player error :', err);
                //고객사 에러 화면 기능 구현
                //ex) documnet.getElementById('error').style.display = 'block';
            },

    }
});

에러 오버라이드 예제 코드 바로가기