컨텐츠 캐시

Video.js는 HTML5 비디오 플레이어 라이브러리로, 다양한 브라우저와 장치에서 일관되도록 비디오를 재생할 수 있도록 기능을 제공합니다.

이러한 기능을 CDN(Content Delivery Network)을 활용하여 제공할 경우 비디오 컨텐츠보다 더욱 빠르면서 안정적으로 재생할 수 있습니다.


본 매뉴얼은 Video.js를 통해 웹 페이지에 동영상을 재생하는 방법을 소개합니다.  

Video.js  깃 허브  

   ※ 본 메뉴얼은 video js 8.12.0 버전을 기준으로 제작되었습니다.     

1. video.js 첨부하기

  Video.js는  깃허브, npm 등을 통해 서버에 설치 하거나 Video.js 깃허브에 공개된 CDN 버전으로 이용할 수 있습니다.   

1) CDN 방식  

Video.js readme에 존재하는 quoick start 가이드와 같이 head 부분에 존재하는 하단 태그를 첨부하여 Video.js를 불러올 수 있습니다. 

2) 다운로드 방식 

  github (https://github.com/videojs/video.js)  or  npm 으로 서버에 다운로드 하고,   

  다운로드받은 Video.js의 경로를 확인하여 video-js.min.css 와 video.min.js를 첨부합니다. 

ex)  videojs 폴더에 위치한 경우  

<link href="/videojs/video-js.min.css" rel="stylesheet">

<script src="/videojs/video.min.js"></script>

2. 플레이어 추가 및 영상 소스 첨부 

video tag 로 플레이어 를 추가하고  그 안에 source src 태그로 영상을 추가합니다. 

 ※source src=" 영상 파일 경로 "

  class 안에 vjs-big-play-centered 를 추가할 경우 재생버튼을 영상 가운데로 보낼 수 있습니다.  

동영상 썸네일 이미지 표시 

동영상 업로드시 자동 생성되는 이미지파일이나 개인적으로 제작한 썸네일 이미지를 첨부할 수 있습니다. 

video 태그 안에  poster 태그를 사용하여 썸네일로 사용할 이미지의 URL을 입력하면 썸네일 추가가 가능합니다.

동영상 플레이어 추가 옵션 

video 태그 안에 autoplay 등의 추가 설정이 가능합니다  

  controls -> 플레이어 컨트롤기능 허용 * controls 를 금지할경우 autoplay 를 추가해야 영상 재생이 가능합니다. 

 autoplay -> 자동재생   * 최근 대다수의  웹 브라우져 정책에 따라 오디오를 제외한 muted 로 설정해야 자동 재생이 가능하며, 접속자 환경에 따라 자동 재생이 불가능 할 수 있습니다.  

 loop -> 반복 재생  

video js 옵션의 상세 가이드는 https://docs.videojs.com/tutorial-options.html  에서 확인하시기 바랍니다.