You cannot see this page without javascript.

Flowplayer

HTML Tag 조회 수 596 추천 수 0 2013.07.20 15:22:06

요즘 처럼 멀티 디바이스 환경에서 날코딩으로 동영상을 모든 브라우저에 보이도록 최적화 시키기가 쉽지 않다.


물론 유튜브(YouTube)나 비메오(Vimeo) 같은 동영상 공유 사이트를 이용하는 방법도 있을 것이다.

그렇지만...그럼에도 불구하고 내 맘데로 내 멋데로 내 서버를 쓰고 싶을때도 있다.


그럴때 여기 아주 쉽고 편리한 방법이 있다. 바로 Flowplayer를 이용하는 것이다.


일종의 jQuery 플러그인 이다. jQuery와 flowplayer.js 라이브러리를 호출하여 사용하는 방식이다.


크롬이나 파이어폭스 등 일반적인 웹 표준 브라우저에서는 Video 오프젝트를 사용하여 mp4파일을 스트리밍 할 수 있으며 인터넷 익스플로러에서는 플래시에서 mp4를 호출하는 방식을 사용하여 플레이하도록 하고 있다.


1. 데모; http://flowplayer.org/demos/

위의 데모 사이트를 방문에 보면 어떤 느낌이 바로 알 수 있다.




2. 플레이어 창 꾸미기; http://flowplayer.org/designer/

최근에 추가된 기능인데 플레이어의 창을 꾸며서 코드를 가져올 수 도 있게 되었다.

제어 버튼의 종류나 타입을 마음데로 바꿀 수 있다.

편리하고 예쁜 플레이어를 만들어 보자~



3. 다운로드; http://flowplayer.org/download/

위 경로에 접속하여 Download ZIP 버튼을 클리하여 다운 받을 수 있다.

무료 버번은 flowplayer라는 로고가 워터마크로 나타난다.

이게 불만이라면, 사용 버전을 구입할 수 있다. 1개 도메인 당 $95 이다.



4. 사용방법; http://flowplayer.org/docs/

사용 방법은 매우 간편하다.


1) 헤더에 jQuery 라이브러리와 flowplayer 라이브러리 그리고 skin css파일을 호출한다.

이 파일을은 모두 아마존 클라우드 서비스로 공유 되고 있다. 아래 소스처럼 외부 파일을 호출하여 사용할 수 도 있고 직접 사이트에 포함시켜 그 파일을 호출 할 수 도 있다.  

<!-- 1. jquery library -->

<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>
 
<!-- 2. flowplayer -->
<script src="http://releases.flowplayer.org/5.3/flowplayer.min.js"></script>
 
<!-- 3. skin -->
<link rel="stylesheet" type="text/css"
href="http://releases.flowplayer.org/5.3/skin/minimalist.css" />

음...뭐 이건 개인의 선택에 맡기겠지만...개인적으로는 커넥션 문제로 약간의 딜레이 타임이 발생할 수 도 있어서 로컬에서 호출하는 방식을 권한다.


2) HTML5로 제작하는 경우 아래와 같이 아주 간단한 태그로 적용이 가능하다.

<div class="flowplayer">

   <video src="intro.mp4"></video>
</div>


상세설정

아래는 여러가지 아이디어를 가능하게 하는 사용자 정의 태그이다.

<div class="player" data-engine="flash">

   <video preload="none">
<source type="video/webm" src="http://mydomain.org/intro.webm"/>
<source type="video/mp4" src="http://mydomain.org/intro.mp4"/>
<source type="video/ogg" src="http://mydomain.org/intro.ogv"/>
</video>
</div>
 
<script>
// run script after document is ready
$(function() {
 
// install flowplayer to an element with CSS class "player"
$(".player").flowplayer({ swf: "/swf/flowplayer-.swf" });
 
});
</script>



지원되는 포멧

Browseroggmp4webm
IE-9.0-
Firefox3.5-4.0
Chrome3.03.06.0
Safari-3.1-
Opera10.5-10.6

OGG파일로 파이어폭스를 지원할 수 도 있겠지만...MP4만 제공할 경우 파이어폭스에서 플래시로 플레이 된다.

뭐 사실상 mp4만 있으면 모든 브라우저를 지원한다고 할 수 있다.


즐거운 동영상의 세게로 날아가 봅시다~

List of Articles
번호 제목 글쓴이 날짜 조회 수sort

HTML Tag CSS 여러가지 모양 만들기

  • LynX
  • 2018-02-08
  • 조회 수 130

HTML Tag HTML문서에 CSS를 사용하는 3가지 방법

  • LynX
  • 2015-02-06
  • 조회 수 159

HTML Tag 대체 URL

  • LynX
  • 2014-01-06
  • 조회 수 195

HTML Tag DIV 태그 (레이어)

  • LynX
  • 2014-06-02
  • 조회 수 341

HTML Tag 모바일 웹에서 동영상 재생방법

  • LynX
  • 2013-07-13
  • 조회 수 440

HTML Tag Flowplayer [11]

  • LynX
  • 2013-07-20
  • 조회 수 596

HTML Tag JWPlayer 사용법 #1 시작 file [7]

  • LynX
  • 2013-06-25
  • 조회 수 636

HTML Tag JWPlayer 사용법 #2 포맷 [14]

  • LynX
  • 2013-06-25
  • 조회 수 802

HTML Tag css, cascading style sheets, 스타일 정의 방법 [9]

  • LynX
  • 2015-02-06
  • 조회 수 1688

XE Login