Video Player Demo 가이드
  • PDF

Video Player Demo 가이드

  • PDF

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

예제

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

기본

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

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

videoplayer_demo_01_ko

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

여러 비디오 재생

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

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

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

// 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'

이 문서가 도움이 되었습니까?