플레이어 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, // 음소거 상태 UI 표시 안 함(false(기본값): 음소거 상태 UI 표시)
});

구간 이동 미리 보기

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

예제는 다음과 같습니다.

// 동영상(MP4)
new ncplayer('video1', {
  autostart: true, // for test
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],
	seekingPreview: true, // 탐색 슬라이더 미리 보기 표시(기본값)(false: 미리 보기 표시 안 함)
});

키보드 단축키

keyboardShortcut 속성으로 키보드 단축키 기능을 활성화할 수 있습니다.

예제는 다음과 같습니다.

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

키보드 단축키 기능은 다음과 같습니다.

터치 제스처

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://CDN도메인/example_video_01.mp4',
        },
    ],
    visibleWatermark:true, // 텍스트 워터마크 사용(false(기본값): 텍스트 워터마크 사용 안 함)
    watermarkText:'UserId@SiteDomain', // 워터마크 텍스트, <예시> 시청자를 추적할 수 있는 유저 아이디+사이트명
});

텍스트 워터마크 상세 설정

텍스트 워터마크에 사용 시 워터마크 랜덤 위치 활성화 여부에 따라 상세 옵션을 설정할 수 있습니다.

랜덤 위치 활성화 및 비활성화에 대한 예제는 다음과 같습니다.

• 랜덤 위치 활성화

  // 동영상(MP4)
  new ncplayer('video1', {
    playlist: [
      {
        file: 'https://CDN도메인/example_video_01.mp4',
      },
    ],
    visibleWatermark:true, // 콘솔에서만 설정 가능(false(기본값): 텍스트 워터마크 사용 안 함)
    watermarkText:'UserId@SiteDomain', // <예시> 시청자를 추적할 수 있는 유저 아이디+사이트명
    watermarkConfig:{
        randPosition: true, // 워터마크 랜덤 위치 활성화(기본값)
        randPositionInterVal: 5000, // 워터마크 위치 랜덤 변경 시간, 기본값: 3000(3초)
    }
  });
  

• 랜덤 위치 비활성화

  // 동영상(MP4)
  new ncplayer('video1', {
    playlist: [
      {
        file: 'https://CDN도메인/example_video_01.mp4',
      },
    ],
    visibleWatermark:true, // 콘솔에서만 설정 가능(false(기본값): 텍스트 워터마크 사용 안 함)
    watermarkText:'UserId@SiteDomain', // <예시> 시청자를 추적할 수 있는 유저 아이디+사이트명
    watermarkConfig:{
        randPosition: false, // 워터마크 위치 고정
        x: 10, // 가로 위치 %
        y: 2,  // 세로 위치 %
        opacity: 0.4 //투명도 0.1 ~ 1
    }
  });