예제

해당 설명서는 player를 사용함에 있어 기본적인 것들과 설정을 하는 것에 대한 간단한 적용 예제를 설명합니다.

기본

최소한의 설정으로 플레이어 실행시 화면입니다. 기본적인 Control 들이 노출됩니다.

mp4, hls 형식의 포맷을 지원합니다.

//동영상(MP4)
new ncplayer('video4', {
  playlist: 'https://CDN도메인/example_video_01.mp4',
});

여러 비디오 재생

여러 비디오를 연속하여 재생하는 예제입니다.

playlist 속성에 연속되는 비디오 정보를 전달할 수 있습니다. autostart가 false이면, 자동으로 다음 비디오가 재생되지 않습니다.

다음, 이전 버튼이 표시됩니다.

// NCP 동영상(MP4)
new ncplayer('video1', {
  autostart: true, // for test
  playlist: [
    { file: 'https://CDN도메인/example_video_01.mp4' },
    { file: 'https://CDN도메인/example_video_02.mp4' },
    { file: 'https://CDN도메인/example_video_03.mp4/index.m3u8' }
  ],
});

Controls

controls 속성으로 비디오 컨트롤 표시여부를 설정합니다. 기본값은 true 입니다.

//동영상(MP4)
new ncplayer('video1', {
  controls: false,
  autostart: true, // for test
  playlist: [
    {
      file: 'https://https://CDN도메인/example_video_01.mp4',
    },
  ],

자동 재생

autostart 속성으로 자동 재생 여부를 설정합니다.

//동영상(MP4)
new ncplayer('video1', {
  autostart: true,
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],

자동재생 정책

사용자 관점에서 웹페이지가 시작됨과 동시에 소음이 나거나 영상이 재생되는 경우 불편함을 느낄 수 있습니다. 이 때문에 브라우저는 특정 상황에서만 자동재생 되도록 제한됩니다. 그래서 아래 상황 중 하나 이상을 만족하여야 자동재생이 가능합니다.

음소거되거나 볼륨이 0일때
클릭, 터치, 키 입력 등 웹페이지에서 사용자의 입력이 있고 난 후
환경설정에서 화이트 리스트 페이지로 설정된 경우
자동재생을 지원하는 <iframe> 과 해당 문서

음소거

mute 속성으로 음소거 여부를 설정합니다. 기본값은 false입니다.

//동영상(MP4)
new ncplayer('video1', {
  mute: true,
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],

반복 재생

refeat속성으로 반복여부를 설정합니다. 기본값은 false입니다.

//동영상(MP4)
new ncplayer('video1', {
  repeat: true,
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],

자동 정지

autoPause 속성으로 플레이어의 자동정지 여부를 설정합니다. 기본값은 false입니다.

브라우져 창이 최소화되거나 탭이 전환될때 자동으로 플레이어를 정지상태로 만듭니다. 플레이어를 실행하고 창을 최소화 해보세요.

// NCP 동영상(MP4)
new ncplayer('video1', {
  autoPause: true,
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],

비율 지정

aspectRatio 속성으로 "X:Y" 형식의 가로세로 비율을 지정합니다. 플레이어가 고정형 사이즈( width, height)를 가지고 있지 않을 때 적용됩니다.

container 의 크기가 변해도 가로세로 비율이 유지됩니다.

고정 비율

//동영상(MP4)
new ncplayer('video1', {
  aspectRatio: '16:9',
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],

Width

width 속성으로 플레이어의 가로길이(px)를 고정합니다.

// NCP 동영상(MP4)
new ncplayer('video1', {
  width: 400,
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],

Height

height 플레이어의 세로길이(px)를 고정합니다.

// NCP 동영상(MP4)
new ncplayer('video1', {
  height: 400,
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],

재생 속도 조절

playbackRate 속성으로 영상의 재생속도를 조절합니다. 지정하지 않는경우 기본값은 1.0이 적용됩니다.

1.0보다 낮으면 느려지고 높으면 빠르게 재생됩니다.

//동영상(MP4)
new ncplayer('video1', {
  autostart: true, // test
  playbackRate: 0.5,
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
    },
  ],

poster

playlist 내에 poster속성으로 비디오가 재생되기 전에 표시할 이미지를 설정합니다.

// NCP 동영상(MP4)
new ncplayer('video1', {
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
      poster: 'https://CDN도메인/example_video_01.png',
    },
  ],

품질 조정

영상의 해상도를 조절합니다.

ABR(Adaptive bitrate)형식의 hls 비디오인 경우 사용자의 네트워크상태에 따라 자동으로 초기화질이 결정됩니다.

//동영상(VOD Station - HLS)
new ncplayer('video3', {
  playlist: [
  {
    autostart: true, // for test
    file: 'https://CDN도메인/hls/abr2/vod-,5400,2400,1200,900,720,k.mp4.smil/master.m3u8',
  },
],

hls와 같은 형식을 사용할 수 없는 경우, 품질이 다른 비디오 파일을 나열하여 플레이어에서 품질 선택 설정 메뉴를 사용할 수 있습니다.

이 경우 대역폭 또는 다운로드 속도에 따른 자동 전환기능을 사용할 수 없습니다.

default 속성으로 초기 해상도를 지정할 수 있으며, 명시하지 않을경우 첫번째 영상이 재생됩니다.

//동영상(MP4)
new ncplayer('video1', {
  playlist: [
  {
    autostart: true, // for test
    sources: [
      {
        file: 'https://CDN도메인/1080p.mp4',
        label: 'FHD',
        default: true,
      },
      {
        file: 'https://CDN도메인/720p.mp4',
        label: 'HD',
      },
      {
        file: 'https://CDN도메인/320x240.mp4',
        label: 'SD',
      },
    ],
  },
],

자막

playlist 내에 captions 속성으로 자막파일을 설정합니다.

언어별로 자막파일을 설정할 수 있으며, default값으로 초기 값을 지정할 수 있습니다.

[참고] 영상내에 이미 자막이 포함되어 있는 경우에는 표시 여부를 설정할 수 없으며, 별도의 자막파일이 존재하는 경우에만 설정이 가능합니다.

현재 ncplayer 는 WebVTT 형식의 자막만 제공합니다.

// 동영상(MP4)
new ncplayer('video1', {
  playlist: [
    {
      file: 'https://CDN도메인/example_video_01.mp4',
      captions: [
        {
          file: 'https://CDN도메인/example_video_01.vtt',
          label: '한국어',
          language: 'ko',
          default: true,
        },
        {
          file: 'https://CDN도메인/example_video_01_en.vtt',
          language: 'en',
          label: '영어',
        },
      ]
    },
  ],

우클릭 메뉴

about 속성으로 플레이어 우클릭 메뉴 링크와 텍스트를 변경할 수 있습니다.

해당 속성을 사용하지 않는 경우, 네이버 클라우드 플랫폼 텍스트와 바로가기가 기본으로 제공됩니다.

//동영상(MP4)
new ncplayer('video1', {
  about: {
    link: 'https://www.naver.com',
    text: '네이버'
  },
  playlist: 'https://CDN도메인/example_video_01.mp4'

포털 바로가기 네이버 클라우드 플랫폼 설명서

예제

기본