플레이어 UI

Classic/VPC 환경에서 이용 가능합니다.

플레이어 UI에서는 스크립트 코드를 수정하여 플레이어 UI와 관련한 옵션을 설정하는 방법을 설명합니다.

화면 비율

aspectRatio 속성으로 'X:Y' 형식의 가로·세로 비율을 지정할 수 있습니다.

예제는 다음과 같습니다.

// NCP 동영상(MP4)
new ncplayer('video1', {
  aspectRatio: '16/9', // 화면 비율 설정
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],
});

화면 채움

objectFit 속성으로 화면의 채움 방식을 설정할 수 있습니다. 예제는 다음과 같습니다.

// NCP 동영상(MP4)
new ncplayer('video1', {
  aspectRatio: '16/9',
  objectFit: 'cover', // 화면 채움 설정
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],
});

컨트롤바 표시

controls 속성으로 컨트롤바 표시 여부를 설정할 수 있습니다. 예제는 다음과 같습니다.

// NCP 동영상(MP4)
new ncplayer('video1', {
  autostart: true,
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
      poster: 'https://CDN도메인/example_video_01.png',
    },
  ],
  controls: false // 컨트롤바 표시 여부 설정
});

컨트롤바 버튼 UI

controlBtn 속성으로 컨트롤바의 버튼 UI 사용 여부를 설정할 수 있습니다. 버튼 UI 설정에 관한 자세한 내용은 플레이어 설정을 참고해 주십시오.

예제는 다음과 같습니다.

// NCP 동영상(MP4)
new ncplayer('video1', {
  autostart: true,
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
      poster: 'https://CDN도메인/example_video_01.png',
    },
  ],
  controls: true,
  controlBtn:{
      play: true,  // 재생 버튼
      fullscreen: true, // 전체화면 전환 버튼
      volume: true, // 볼륨 컨트롤
      times: true, // 재생 시간 표시
      pictureInPicture: true, // 미니 플레이어 전환 버튼
      setting: true, // 설정 버튼
  },
});

컨트롤바 색상

progressBarColor 속성으로 컨트롤바 영상 탐색 슬라이더의 색상을 설정할 수 있습니다.

예제는 다음과 같습니다.

// NCP 동영상(MP4)
new ncplayer('video1', {
  autostart: true,
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
      poster: 'https://CDN도메인/example_video_01.png',
    },
  ],
  progressBarColor: "#ff0000", // 색상코드
});

다국어

lang 속성으로 컨트롤바 언어를 고정할 수 있습니다.

예제는 다음과 같습니다.

//동영상(MP4)
new ncplayer('video4', {
    playlist: 'https://CDN도메인/example_video_01.mp4',
    lang:'en' // 다국어 설정
});

컨트롤바 표시 시간

controlActiveTime 속성으로 컨트롤바가 표시되는 시간을 설정할 수 있습니다.
<예시> 1.5초 동안 표시 controlActiveTime: 1500

예제는 다음과 같습니다.

// NCP 동영상(MP4)
new ncplayer('video1', {
  autostart: true,
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
      poster: 'https://CDN도메인/example_video_01.png',
    },
  ],
  controlActiveTime: 3000, // 컨트롤 UI 활성화 3초 후 사라짐
});

컨트롤바 UI 고정

ui 속성으로 디바이스에 관계없이 컨트롤바 UI를 고정할 수 있습니다.

예제는 다음과 같습니다.

// NCP 동영상(MP4)
new ncplayer('video1', {
  autostart: true,
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],
  ui: 'mobile', // ui 설정을 모바일(all, pc, mobile)
});

자막 설정

Video Player Enhancement 는 VTT 형식의 캡션(자막)을 지원합니다.
playlist.vtt 속성을 이용하여 자막을 표시합니다. 배열형태로 복수의 자막을 지원합니다.

// NCP 동영상(MP4)
new ncplayer('video1', {
    playlist: [
        { 
            file: 'https://CDN도메인/example_video_01.mp4',
            poster : 'https://CDN도메인/example_image_01.png',
            vtt:[
                {
                    file:'https://CDN도메인/subtitles-ko.vtt',
                    label:'한국어'
                },
                {
                    file:'https://CDN도메인/subtitles-en.vtt',
                    label:'English'
                }
            ] 
        }
    ],
});

커스텀 버튼 추가

customBtns 속성으로 플레이어에 추가 버튼을 노출시킬 수 있습니다.

예제는 다음과 같습니다.

//동영상(MP4)
let player = new ncplayer('video1', {
  playlist: [
    {
      file: 'https://https://CDN도메인/example_video_01.mp4',
    },
  ],
  customBtns: [
          {
              ui: "pc", //설치할 UI
              id: "chatBtn", //버튼의 DOM ID
              position: "right-bottom", //버튼 포지션
              flow: "left", //버튼 생성위치
              icon: "https://CDN도메인/example_video_01.svg", //버튼이미지
              callback(){ //클릭 이벤트
                alert('버튼클릭')
              }
              
          },
          {
              ui: "mobile", //설치할 UI
              id: "chatBtn", //버튼의 DOM ID
              position: "right-bottom", //버튼 포지션
              flow: "left", //버튼 생성위치
              icon: "https://CDN도메인/example_video_02.svg",  //버튼이미지
              callback(){ //클릭 이벤트
                alert("버튼클릭")
              }
            }
  ]
});

//ready 이벤트를 이용하여 커스텀 버튼에 이벤트 바인딩
player.on('ready',()=>{
  documnet.getElementById('chatBtn').addEventListener('click',()=>{
      alert('버튼클릭')
  });
})