<< JODConverter(Java OpenDocument Converter) 소개 | Home | Java 기반의 HTML5 WebSockets 맛보기 >>

HTML5 기반의 Flowplayer(오픈소스 비디오 플레이어) 사용법

How to Use Flowplayer as Your Web Video Player(HTML5)

Flowplayer는 상용도 있지만, 오픈 소스 기반의 플래시기반의 멀티미디어 플레이어입니다. jwPlayer와 많이 비교되는데 대체적으로 Flowplayer를 선호하는 경향입니다.

그리고 아래 예제는 HTML5 기반의 비디오 플레이를 예제로 적용해 봤습니다. 익스플로러 같은 경우는 video 태그 지원이 안되어 자동으로 플래시 플레이어인 Flowplayer가 구동되어 동영상이 처리되도록 되어 있습니다.

1. Flowplayer 소개
 - 무료 버전 :로고가 나옴
 - 상용 버전 : 로고 안나오고 자사의 로고로 대체할 수 있음


2. Flowplayer 브라우저 호환성
 - Internet Explorer 6.0+
 - Firefox FF 2+
 - Safari 2.0+
 - Opera 9.0+


3. Flowplayer 지원 비디오 포멧
 - Flv
 - H.264
 - Mp4


4. 필요한 라이브러리 설치
 - 무료 Flowplayer 다운로드(flowplayer-3.5.1.zip)
 - 무료 Videojs 다운로드(video-js-2.0.2.zip)


5.  사용 샘플
body 안에
<!-- Begin VideoJS -->
<div class="video-js-box">
  <video id="example_video_1" class="video-js" width="640" height="264" 
   controls="controls" preload="auto" poster="oceans-clip.png">
    <source src="video/oceans-clip.mp4" 
      type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
    <source src="'video/oceans-clip.webm" 
      type='video/webm; codecs="vp8, vorbis"'/>
    <source src="'video/oceans-clip.ogv" 
      type='video/ogg; codecs="theora, vorbis"'/>
    <object id="flash_fallback_1" class="vjs-flash-fallback" 
    width="640" height="264" type="application/x-shockwave-flash" 
      data="http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf">
      <param name="movie" value="swf/flowplayer-3.2.5.swf"/>
      <param name="allowfullscreen" value="true" />
      <param name="flashvars" value='config={"playlist":["images/oceans-clip.png",
        {"url": "http://video-js.zencoder.com/oceans-clip.mp4",
        "autoPlay":false,"autoBuffering":true}]}' />
      <!-- Image Fallback. Typically the same as the poster image. -->
      <img src="images/oceans-clip.png"  width="640" height="264"
       title="No video playback capabilities." />
    </object>
  </video>
  <script type="text/javascript" charset="utf-8">
    var myPlayer = VideoJS.setup("example_video_1");
  </script>
</div>
6. 데모 사이트
 - http://mimul.com/flowplayer/index.html

7. 이슈 사항
 - video 태그의 경우 동영상이 HTTP URL방식으로 소스를 제공하면 HTML5가 정상적으로 플레이되고 중지, 재시작등의 이벤트가 잘 먹히는데 Open API를 통해 스트림으로 제공할 경우는 중지/재시작, 앞/뒤로 가기 등의 이벤트가 제대로 안먹힌다.


[참고 사이트]


Avatar: 미물

Re: HTML5 기반의 Flowplayer(오픈소스 비디오 플레이어) 사용법

10 Best HTML5 Video Player - http://bit.ly/dW6QgP 참고하세요.

Re: HTML5 기반의 Flowplayer(오픈소스 비디오 플레이어) 사용법

 초보자입니다만 제 웹사이트에 넣으려니까 도저히 모르겠습니다만

 

동영상 강의 한번 해주시면 안되나요 ? ㅠ 부탁드립니다 ㅠ

 

 

Re: HTML5 기반의 Flowplayer(오픈소스 비디오 플레이어) 사용법

 <span style="background-color: rgb(238, 238, 238); color: rgb(47, 190, 53);"><!-- Begin VideoJS --></span>

<pre style="background-color: rgb(238, 238, 238); padding: 6px; color: rgb(47, 190, 53); line-height: 1.3em;"> <div class="video-js-box"> <video id="example_video_1" class="video-js" width="640" height="264" controls="controls" preload="auto" poster="oceans-clip.png"> <source src="video/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/> <source src="'video/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'/> <source src="'video/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'/> <object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf"> <param name="movie" value="swf/flowplayer-3.2.5.swf"/> <param name="allowfullscreen" value="true" /> <param name="flashvars" value='config={"playlist":["images/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4", "autoPlay":false,"autoBuffering":true}]}' /> <!-- Image Fallback. Typically the same as the poster image. --> <img src="images/oceans-clip.png" width="640" height="264" title="No video playback capabilities." /> </object> </video> <script type="text/javascript" charset="utf-8"> var myPlayer = VideoJS.setup("example_video_1"); </script> </div>

Add a comment Send a TrackBack