플레이어 UX

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

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

음소거 상태 표시

startMutedInfoNotVisible 속성으로 음소거 상태 UI 표시 여부를 설정할 수 있습니다.

예제는 다음과 같습니다.

//동영상(MP4)
new ncplayer('video1', {
  autostart: true, // for test
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],
	startMutedInfoNotVisible : true, // 음소거 표시 사용 안 함, false: 기본값으로 음소거 상태 UI 표시
});

구간 이동 미리 보기

seekingPreview 속성으로 컨트롤바의 영상 탐색 슬라이더 상단에 해당 구간의 미리 보기를 표시하도록 설정할 수 있습니다.

예제는 다음과 같습니다.

//동영상(MP4)
new ncplayer('video1', {
  autostart: true, // for test
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],
	seekingPreview : true, // 탐색바 미리 보기 추가
});

키보드 단축키

keyboardShortcut 속성으로 키보드 단축키 기능의 활성화 여부를 설정할 수 있습니다.

예제는 다음과 같습니다.

// NCP 동영상(MP4)
new ncplayer('video1', {
autostart: true,
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4',
},
],
keyboardShortcut: true, // 키보드 단축키 사용
});

터치 제스처

touchGestures 속성으로 모바일 UI에서 터치 제스터 사용 여부를 설정할 수 있습니다.

예제는 다음과 같습니다.

//동영상(MP4)
new ncplayer('video1', {
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],
	touchGestures : true // 기본값, 터치 제스처 사용, false: 터치 제스처 사용 안 함
});

워터마크

watermarkText 속성으로 시청자를 추적할 수 있는 워터마크를 유저 아이디+사이트명 등 원하는 텍스트로 설정할 수 있습니다.

예제는 다음과 같습니다.

//동영상(MP4)
new ncplayer('video1', {
    playlist: [
        {
            file: 'https://https://CDN도메인/example_video_01.mp4',
        },
    ],
    visibleWatermark:true, //Video Player Enhancement Console 에서만 설정 가능 
    watermarkText:'UserId@SiteDomain', // ex) 시청자를 추적할 수 있는 유저 아이디+사이트명
});

텍스트 워터마크 상세 설정

//동영상(MP4)
new ncplayer('video1', {
  playlist: [
    {
      file: 'https://https://CDN도메인/example_video_01.mp4',
    },
  ],
  visibleWatermark:true, //Video Player Enhancement Console 에서만 설정 가능
  watermarkText:'UserId@SiteDomain', // ex) 시청자를 추적할 수 있는 유저 아이디+사이트명
  watermarkConfig:{
      randPosition: false, //워터마크 렌덤 위치 활성화 여부 (true : 랜덤 , false : 고정)
      randPositionInterVal:5000, //워터마크 위치 랜덤 변경 시간
      x: 10, //가로 위치 %
      y: 2,  //세로 위치 %
      opacity: 0.4 //투명도 0.1 ~ 1
  }
});