단 몇초만의 클라우드

컨텐츠 캐시 동영상 서비스 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 에서 확인 가능합니다.