고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
jPlayer 는 JavaScript 로 작성된 무료오픈소스(MIT License) 이다.
jPlayer는 아주 쉽고 빠르게 웹페이지내에 Audio 와Video 를 넣을 수 있으며, Cross Platform 을 지원한다.
아래 링크를 통해 바로 확인해 볼 수 있다.
http://jsfiddle.net/jPlayer/XLNCY/
몇가지 특징적인 것은 다음과 같다.
1. 배우기 쉬우며, 쉽게 배치할 수 있다
2. 자신의 취향에 맞게 커스터마이징 가능하며, HTML과 CSS 를 이용하여 스킨변경이 가능하다.
3. 14KB 밖에 안되기 때문에 가볍다
4. 무료이자 오픈소스이며 라이센스 제한이 없다
5. 활동적이고 커가는 커뮤니티가 도움을 제공한다.
6. 유명한 Platform 에 적용가능한 무료 플러그인이 있다
7. 모든 브라우저에서 동일하게 사용할 수 있는 API 와 인터페이스를 제공한다.
아래와 같이 css 파일을 넣어주는 것 만으로 스킨변경이 가능하며, 커뮤니티를 통해 다양한 스킨을 받아볼 수 있다.
- <link type="text/css" href="/skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" />
jPlayer 를 이용하기 위해서는 jQuery 와 jPlayer 플러그인은 함께 사용해야 하는데, 페이지의 헤더부분에
아래와 같이 넣어주면 된다.
- <head>
- <link type="text/css" href="/skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" />
- <script type="text/javascript" src="/js/jquery.min.js"></script>
- <script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
- </head>
Platforms and Browsers
- Windows: Chrome, Firefox, Internet Explorer, Safari, Opera
- Windows (legacy): IE6, IE7, IE8, IE9, IE10, IE11
- OSX: Safari, Firefox, Chrome, Opera
- iOS: Mobile Safari: iPad, iPhone, iPod Touch
- Android: Android 2.3 Browser
- Blackberry: OS 7 Phone Browser, PlayBook Browse
Media Support
- HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
- Flash: mp3, mp4 (AAC/H.264), rtmp, flv
아래는 jPlayer 에서 발생하는 각종 이벤트를 정리한 것이다.
jPlayer Event Types
- $.jPlayer.event.ready * † Occurs when jPlayer is ready to receive commands.
- $.jPlayer.event.setmedia * † Occurs when jPlayer has been given the setMedia commands.
- $.jPlayer.event.flashreset * † Occurs when the Flash solution generates another ready event.
- $.jPlayer.event.resize * † Occurs when the screen state changes and when the size/sizeFull options are changed.
- $.jPlayer.event.repeat * † Occurs when the loop state is changed and before the ready event.
- $.jPlayer.event.click * † Occurs when the user clicks on the poster or video. NB: The GUI skin can interfere with this.
- $.jPlayer.event.error * ‡
- $.jPlayer.event.warning * †
- $.jPlayer.event.loadstart *
- $.jPlayer.event.progress * Occurs while the media is being downloaded.
- $.jPlayer.event.suspend
- $.jPlayer.event.abort
- $.jPlayer.event.emptied
- $.jPlayer.event.stalled
- $.jPlayer.event.play * Occurs when the media is played.
- $.jPlayer.event.pause * Occurs when the media is paused.
- $.jPlayer.event.loadedmetadata *
- $.jPlayer.event.loadeddata
- $.jPlayer.event.waiting •
- $.jPlayer.event.playing •
- $.jPlayer.event.canplay •
- $.jPlayer.event.canplaythrough •
- $.jPlayer.event.seeking *
- $.jPlayer.event.seeked *
- $.jPlayer.event.timeupdate * Occurs when the currentTime is changed. (~250ms between events during playback.)
- $.jPlayer.event.ended * Occurs when the media ends.
- $.jPlayer.event.ratechange
- $.jPlayer.event.durationchange •
- $.jPlayer.event.volumechange * Occurs when volume or muted change.
아래와 같이 사용할 수 있다.
<audio id="audio" preload="auto" src="music.mp3"></audio>
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: "/media/mysound.mp4",
oga: "/media/mysound.ogg"
});
},
swfPath: "/js",
supplied: "m4a, oga"
});
});
</script>
<div id="jquery_jplayer_1"></div>
<div id="jp_container_1">
<a href="#" class="jp-play">Play</a>
<a href="#" class="jp-pause">Pause</a>
</div>
반응형
'IT공부방 > jQuery, ajax, java' 카테고리의 다른 글
| jQuery easing plugin , 동적으로 움직임을 주는 플러그인 (0) | 2016.07.26 |
|---|---|
| jQuery 함수 resize() removeClass() eq() attr() data() html() (0) | 2016.07.25 |
| jQuery 함수 preventDefault() bind() setTimeout() createElement() (0) | 2016.07.22 |
| jQuery 함수 offset() width() mouseenter() mouseleave() click() hover() on() (0) | 2016.07.22 |
| jQuery 의 개요, 함수사용법, CSS함수와 인자 Parameter 설정 (0) | 2016.07.21 |
댓글 영역