컨텐츠 캐시

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

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

 

 

Flowplayer 를 설치합니다.  

https://github.com/flowplayer/flowplayer

   https://flowplayer.com/ 에서 라이센스 구입이 가능하며 

github 에서 flowplayer logo 워터마크가 표시되는 테스트 플레이어를 다운받을 수 있습니다. 

 

 


Flowplayer & Jquery 첨부 

<script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  

 

flowplayer 는 jQuery 1.7.1 이상의 버젼이 필요합니다.  


     

 

Flowplayer.js 첨부 

 

<script type="text/javascript" src="flowplayer.min.js"></script>

Flowplayer skin css파일 첨부 

 <link rel="stylesheet" type="text/css" href="flowplayer/minimalist.css">

  *flowplayer 파일들의 경로를 확인하고 첨부합니다. 

 

 

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

flowplayer 를 추가하고 영상 경로를 맞춰서 첨부합니다.

  <div class="flowplayer">
      <video src="http://계정명.cache.iwinv.net/Sample.mp4" type="video/mp4">
      </video>
  </div>

   div 태그 안에  style 을 추가하여 영상 플레이어의 크기 등을 수정할 수 있습니다. 

 

  

 

 

 동영상 썸네일 추가하기

    Video 태그 안에 poster 를 사용하여 썸네일을 추가할 수 있습니다. 

<div class="flowplayer">
      ...
      <video poster="http://계정명.cache.iwinv.net/thumbnail/Sample.jpg">
      <source src="http://계정명.cache.iwinv.net/Sample.mp4" type="video/mp4">
      ...  
      </video>
</div>

  영상 업로드시 생성되는 썸네일이미지를 사용하거나, 직접 만든 썸네일이미지를 사용할 수 있습니다.  

 

 

 

Video 플레이어 추가옵션  

  video 태그 안에   width , height,  등의 추가 옵션을 사용하여 플레이어 설정이 가능합니다.   

<div class="flowplayer">
      ...
      <video   
       width="1024"
       height="720"
       ... 
       >
      <source src="http://계정명.cache.iwinv.net/Sample.mp4" type="video/mp4">
      ...  
      </video>

 

width -> 영상 넓이 조절 ,  height -> 영상 높이 조절   autoplay -> 자동재생  

muted -> 음소거   

 

 

 

https://www.w3schools.com/TagS/tag_video.asp 에서 일반적인 Video 태그에 대해 확인 가능하시며, 

https://flowplayer.com/developers/player  에서  Flowplayer의 메뉴얼 확인이 가능합니다.