사용하기 전에

  • Video Player 설명서는 네이버 클라우드 플랫폼의 Live Station, VOD Transcoder 출력 재생 및 사용성을 높이기 위해 오픈 소스를 기반으로 구현된 가이드를 제공합니다.
  • 본 가이드는 video.js 7.3.0 버전을 기준으로 작성되었으며, 오픈 소스를 활용한 간단한 Video Player 구현에 대한 방법을 소개하는 가이드기에 Player customizing 및 core 기능에 대한 자세한 사항은 아래 GitHub video.js 링크를 통해 확인해주세요.
  • 가이드내 사용된 리소스는 이해를 돕기 위해 작성된 예시 경로입니다.

Video Player 가이드 소개

Video Player 가이드는 video.js를 기반으로 구현 되었으며, 본 가이드를 통해 Live Station, VOD Transcoder 출력물을 재생할 수 있습니다.

video.js는 HTML5 기반 웹 비디오 플레이어로 모바일과 데스크탑 브라우저에서 영상 재생을 지원하며, video.js 플러그인을 통해 HTML5와 플래시 비디오 재생을 지원하며 Youtube와 Vimeo 재생을 지원 하고 있습니다.

더불어 모바일과 데스크탑 브라우저에서 영상 재생을 지원하며 video.js에 대한 보다 자세한 내용과 기능은 GitHub video.js respository를 참고하세요.

참고 사항 - Video.js 단말별 커버리지

Format Windows Mac OS Mobile
IE 11+ Chrome Safari Android 4.4 iOS
HLS PASS PASS PASS PASS PASS
MP4 PASS PASS PASS PASS PASS

video.js를 활용한 Live Station, VOD Transcoder 영상 재생

Step 1. Web 페이지 생성

재생, 일시 중지, 볼륨 조절 등의 간단한 영상 재생 컨트롤이 포함된 비디오 플레이어를 담을 수 있는 웹 페이지를 생성하며, video.js 사용에 필수적으로 필요한 스크립트를 GitHub video.js respository에서 다운로드한 뒤 서비스할 경로로 복사합니다.

권장 다운로드 버전

  • 7.3.0

video.js 활용 필수 스크립트

<link href="/resources/css/video-js.7.3.0.min.css" rel="stylesheet">
<script src="/resources/js/video-js.7.3.0.min.js"></script>

유의 사항

  • video.js 플러그인 특성상 IE에서 재생이 원활하지 않을 수 있습니다.
  • 만약 IE 브라우저 지원 계획이 있으시다면 IE 재생을 위한 별도 플러그인을 추가하셔야 합니다.
  • 본 가이드는 video.js 7.3.0 버전으로 작성되었습니다. 하위 버전을 사용하는 경우 가이드에서 제공하는 동작과 상이 할 수 있습니다.

Step 2. 플레이어 추가

video.js 플레이어를 활용하기 위해 아래 예시와 같이 재생할 영상 타입 및 플러그인이 포함된 Video tag와 플러그인을 추가합니다.

  • video.js는 플러그인 특성상 IE에서 재생이 원활하지 않을 수 있습니다.
  • 만약 IE 브라우저 지원을 하신다면 별도 플러그인을 추가하셔야 합니다.
  • 본 가이드는 video.js 7.3.0 버전을 기준으로 작성되었습니다.
<video
    id="livestation-player"
    class="video-js vjs-default-skin"
    controls
    preload="auto"
    data-setup='{}'>
  <source src="https://kr.object.ncloudstorage.com/vod/poster.mp4" type="video/mp4"></source>
</video>

유의 사항

  • video.js에서 제공하는 기본 플레이어 Skin을 사용한다면 vjs-default-skin을 추가합니다.
  • 만약 플레이어 내 여러가지 데이터 속성(HTML5, Flash..)을 사용한다면, data type 속성을 통해 타입별로 재생할 우선 순위를 지정 할 수 있습니다.
    • 예: data-setup='{"techOrder":["html5","flash","flvjs"]}
  • data type에 대한 자세한 사항은 GitHub video.js respository를 참고하세요.

참고) 프로토콜별 Application Type 예시

영상 재생을 위한 각 재생 프로토콜별 Source 입력 예시는 아래와 같습니다.

  • HLS

    <source src="https://zzxflvrmrdks890571.cdn.ntruss.com/live/sf5fvupyck3rgu12/playlist.m3u8" type="application/x-mpegURL"/>
    
  • HLS 영상 중단 기능 활용에 대한 자세한 사항은 GitHub video.js respository를 참고하세요.
  • MP4/FLV (VOD)
<source src="https://kr.object.ncloudstorage.com/vod/poster.mp4" type="video/mp4"/>
<source src="https://kr.object.ncloudstorage.com/vod/poster.flv" type="video/flv"/>
  • flv 재생은 별도의 플러그인 추가가 필요합니다. (ex. videojs-flvjs.min.js)
  • flv 재생은 7.3.0 버전이 아닌 6.x 버전에서 활용 하시길 권장 합니다.
  • Flash contents (RTMP)
<source src="rtmp://upload-nc.nstream.video/live&bfb8gdlm3db855zgnebpjoklh0bycoc5" type="video/mp4"/>
  • RTMP 영상을 재생하실 경우 브라우저 내 flash가 설치 되어있어야 합니다.
  • Flash 재생은 video.js에서 기본적으로 제공하는 기능이 아닙니다. 재생을 위해 별도 플러그인 적용이 필요합니다. (ex.videojs-flash)
    • 만약 flash 재생을 지원 하실 계획이 있으시다면 video.js 6.x 버전을 활용 하시길 권장 합니다.
  • RTMP 영상을 재생할 경우 type은 'video/mp4'로 지정 합니다.
  • Application과 Stream name 사이 반드시 & 특수 문자를 입력 해야합니다.
    • 예: live&bfb8gdlm3db855zgnebpjoklh0bycoc5
  • flash 재생만 활용할 경우 data-setup은 '{"techOrder":["flash"]}'로 설정할 수 있습니다.

Step 3. 활용 예시

Live Station m3u8 재생

실시간으로 트랜스코딩 되고 있는 Live Station 콘텐츠를(m3u8) video.js를 활용한 플레이어를 통해 재생할 수 있습니다.

① thumbnail 포스터 이미지 추가

플레이어 내 미리보기 화면을 Live Station 섬네일 이미지로 노출할 수 있습니다.

아래 poster에 포스터 이미지 URL을 추가합니다.

<video
    id="livestation-player"
    class="video-js"
    controls
    preload="auto"
    poster="https://zzxflvrmrdks890571.cdn.ntruss.com/live/sf5fvupyck6rgu12/thumbnail_original.jpg"
  .....
</video>
② 플레이어에서 재생할 HLS 콘텐츠 추가
 <source src="https://zzxflvrmrdks890571.cdn.ntruss.com/live/sf5fvupyck6rgu12/playlist.m3u8" type="application/x-mpegURL"></source>
상세 구현

예시 : ① ~ ②을 활용한 네이버 클라우드 플랫폼 Live Station 콘솔 내 모니터링 플레이어

만약 플레이어내 화질 전환 구현 가이드가 필요하시다면 아래 부록을 참고해주세요.

VOD Transcoder 영상 재생

Job 수행이 완료된 VOD Transcoder 출력물을 플레이어에서 재생할 수 있습니다.

① Thumbnail 포스터 이미지 추가

플레이어 미리 보기 화면을 특정 이미지로 노출할 수 있습니다.

아래 poster에 Image URL을 추가합니다.

<video
    id="vodTranscoder-player"
    class="video-js"
    controls
    preload="auto"
    poster="https://kr.object.ncloudstorage.com/vod/poster.png"
  .....
</video>
② 플레이어에서 재생할 VOD 콘텐츠 추가
<source src="https://kr.object.ncloudstorage.com/vod/abc.mp4"" type="video/mp4"></source>
  • 아래처럼 video 태그 내 loop태그를 추가하면 VOD를 무한 재생할 수 있습니다.
  <video
  .....
      preload="auto"
      loop
  .....
상세 구현

예시 : ① ~ ②을 활용하여 Live Station의 레코딩 파일을 미리 재생할 수 있습니다.

  • 레코딩 파일 영상 재생 전 (Poster 활용)

  • flv vod 파일 재생


부록 1. Demo Player

자주 사용되는 프로토콜별 콘텐츠의 재생을 video.js를 통해 구현된 플레이어로 재생할 수 있습니다.

데모 플레이어는 아래 링크를 클릭해주세요.

  • Video player demo (아래 텍스트를 클릭하면 데모 페이지로 이동합니다.)

부록 2. Customizing 예시

video.js에서 제공하는 default-skin 및 플러그인을 활용하거나 CSS를 수정한다면 서비스 용도에 맞게 다양한 플레이어를 구현할 수 있습니다.

Custom skin을 적용한 플레이어

  • ① Control bar 내 아이콘 변경 및 css 수정을 통해 customizing skin을 구현 할 수 있습니다.
  • ② Customizing을 통해 재생 콘텐츠가 m3u8 이면 LIVE로 노출됩니다.
  • ③ 특정 화질 선택을 통해 화질별 영상을 재생할 수 있습니다.
  • 화질 전환 기능은 video.js core에서 제공하는 기능이 아닌 별도 플러그인으로 구현 되었습니다. (예: videojs-resolution-switcher.js)
    • 상세 사항은 위 플러그인 gitHub 링크를 통해 확인하세요.

""에 대한 건이 검색되었습니다.

    ""에 대한 검색 결과가 없습니다.

    처리중...