컨텐츠 캐시

한정훈 에반젤리스트

컨텐츠 캐시 동영상 서비스 Video.js 이용 메뉴얼

Video.js 를 이용하여 동영상을 재생할 수 있습니다. 

 


 

Video.js 다운로드 

https://github.com/videojs/video.js/releases

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

 

 

video.js 첨부  

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

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

 

 

 

 

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

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

<video
       id="my-player" 
class="video-js vjs-big-play-button vjs-big-play-centered"
controls
preload="auto"
data-setup='{}'>
<source src="http://계정명.cache.iwinv.net/Sample.net" type="video/mp4"></source>
</video>

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

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

 

 

 

 

동영상 썸네일 이미지 표시 

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

 

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

 

<video
       id="my-player" 
class="video-js vjs-big-play-button vjs-big-play-centered"
controls
poster="http://계정명.cache.iwinv.net/thumbnail/Sample.jpg"
preload="auto"
data-setup='{}'>
<source src="http://계정명.cache.iwinv.net/Sample.net" type="video/mp4"></source>
</video>

 

 

 

 

 

동영상 플레이어 추가 옵션 

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

<video
       id="my-player" 
class="video-js vjs-big-play-button vjs-big-play-centered"
controls
autoplay="true"
loop

poster="http://계정명.cache.iwinv.net/thumbnail/Sample.jpg"
preload="auto"
data-setup='{}'>
<source src="http://계정명.cache.iwinv.net/Sample.net" type="video/mp4"></source>

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

 autoplay -> 자동재생  

 loop -> 반복 재생  

 

 

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