jPlayer : HTML5 Audio & Video for jQuery

Related tags

Video/Audio jPlayer
Overview

jPlayer : HTML5 Audio & Video for jQuery

Gitter

Support for Zepto 1.0+ compiled with the data module.

What is jPlayer?

jPlayer is a jQuery/Zepto plugin that allows you to:

  • play and control media files in your webpage.
  • create a consistent interface and experience across all browsers.
  • create and style a media player using just HTML and CSS.
  • add audio and video to your jQuery/Zepto projects.
  • support more devices using HTML5.
  • support older browsers using a Flash fall-back/forward.
  • control media on your website using a JavaScript API.

jPlayer supports:

  • HTML5: mp3, m4a (AAC), m4v (H.264), ogv*, oga*, wav*, webm*
  • Flash: mp3, m4a (AAC), m4v (H.264), rtmp, flv.

(*) Optional counterpart formats to increase HTML5 cross-browser support.

Bower Install

  • simple install using bower install jplayer
  • see http://bower.io/ for more information.

Composer install

Install jPlayer via composer by adding the following lines to your composer.json in your project:

// ...
"require": {
    // ...
    "happyworm/jPlayer": "2.*"
    // ...
}
// ...
"config": {
    "component-dir": "your/desired/asset/path"
},
// ...

Then execute the following:

php composer.phar update

Composer will now download all components and install the needed files into your/desired/asset/path, ready to use.

License

jPlayer is licensed under the MIT license.

More information:

Author:

Mark J Panaghiston @thepag happyworm.com

Alternative Versions

Comments
  • Add Aurora.js solution

    Add Aurora.js solution

    This add Aurora.js solution to jPlayer, like are html / flash solutions. I personally did this for the Ampache project to avoid server transcoding when it is only used because of browser compatibility issues.

    To test it, get the branch and set the following jPlayer options:

    solution: 'html, flash, aurora',
    auroraFormats: 'flac, m4a, mp3, oga'
    

    Then include Aurora.js scripts / decoders:

    <script src="aurora.js"></script>
    <script src="ogg.js"></script>
    <script src="flac.js"></script>
    <script src="opus.js"></script>
    <script src="mp3.js"></script>
    

    I added a new auroraFormats option because Aurora.js can be extended with new decoders and we cannot determine which decoder manage which format from the js api. Aurora.js provides a limited set of events, I will attempt to pull request on Aurora.js to improve their api but better to talk here before ; if this has some interest.

    Feature Request Accepted dev branch 
    opened by Afterster 24
  • jPlayer 2.6.0 and inspector. HTML5 mp3 detection fails on Chrome > 35

    jPlayer 2.6.0 and inspector. HTML5 mp3 detection fails on Chrome > 35

    I know Chrome html5 can play mp3 natively because when I throw http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3 at it, it plays it natively.

    And http://html5doctor.com/html5-audio-the-state-of-play/#support says

    Chrome 6.0+ Ogg Vorbis, MP3, WAV†

    and http://www.chromium.org/audio-video says

    Codec Support. As of February 2014 [...] Google Chrome, the following codecs/containers are also included: MP3 audio codec

    And http://jplayer.org/ says jplayer supports:

    HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav

    If I browse to http://www.jplayer.org/latest/demo-01-supplied-mp3/ I get the following results:

    BUILDS THAT PASS

    Chrome 35.0.1916.153 (Ubuntu 14.04 x32 desktop

    This jPlayer instance is running in your browser where:
    jPlayer's html solution is being used and will support: mp3
    jPlayer's flash solution is not required
    The HTML5 is active.
    status.formatType = 'mp3'
    Browser canPlay('audio/mpeg; codecs="mp3"')
    

    BUILDS THAT FAIL

    (I've tried to collate these as neatly as possible)

    Chrome 36.0.1985.67 beta-m

    • Win 7 x64 laptop

    Version 37.0.2054.3 dev-m

    • Ubuntu 14.04 x32 desktop
    • Mac 13-inch, Mid 2009 2.13 GHz Intel Core 2 Duo OS X 10.9.3 (13D65)
    • Windows 8.1 X64

    Windows 8.1 X64

    • Chrome 37.0.2041.4 dev-m
    • Windows 8.1 X64

    ..

    This jPlayer instance is running in your browser where:
    jPlayer's html solution is not required
    jPlayer's flash solution is being used and will support: mp3
    The Flash is active.
    status.formatType = 'mp3'
    Browser canPlay('audio/mpeg; codecs="mp3"')
    

    FOR REFERENCE

    On all the above machines, I tested with Firefox 30.0

    This jPlayer instance is running in your browser where:
    jPlayer's html solution is being used and will support: mp3
    jPlayer's flash solution is not required
    The HTML5 is active.
    status.formatType = 'mp3'
    Browser canPlay('audio/mpeg; codecs="mp3"')
    

    I've also posted this as a ticket at https://code.google.com/p/chromium/issues/detail?id=386073

    opened by ghost 17
  • m3u8 support

    m3u8 support

    m3u8 support for iPad and iPhone is a pretty useful feature for streaming live video with native support. Also listed here: https://groups.google.com/d/topic/jplayer/1b0SZQf2Oh0/discussion

    This could be done as simple as adding the format to the list as it basically an container format of distribution of m4v (which is recognized by the iPad/quicktime).

    DRAFT: http://tools.ietf.org/html/draft-pantos-http-live-streaming-10

    Tested on iPad3

    opened by rickvanderzwet 16
  • Composer support

    Composer support

    This PR adds support for installing jPlayer via composer to simply install and use it and keep it updated in Symfony2 applications and other projects that use composer. Also added a short installation guide for now. If you merge this, you might want to register jPlayer on Packagist to get rid of the "repositories": {} part that is currently needed to install it.

    Feature Request Accepted dev branch 
    opened by thormeier 14
  • Broken library compatibility

    Broken library compatibility

    Hi!

    It looks like after one of the updates the backward compatibility was broken.

    I were using library from this path: bower/jplayer/jquery.jplayer/jquery.jplayer.js

    and now it's suddenly in here: bower/jplayer/src/javascript/jplayer/jquery.jplayer.js.

    According to SemVer, when the library API is changed the major version number must be increased.

    This problem can potentially break a lot of projects out there after a routine dependency update.

    opened by slavafomin 12
  • jplayer 2.7 not working on Android - workaround here, but fix needed.

    jplayer 2.7 not working on Android - workaround here, but fix needed.

    There's a lively thread on the group at https://groups.google.com/d/msg/jplayer/BoVUNok0yl4/LU8q2wggQaYJ regarding jplayer not working on Android. There is also a workaround supplied which is to comment out

        //self.androidFix.setMedia = true;
    

    however I guess that function does something else, too. So flagging it up here for review rather than doing a pull request. All thanks to Cyril for finding a workaround.

    opened by ghost 12
  • Add support for native fullscreen api in Internet explorer.

    Add support for native fullscreen api in Internet explorer.

    IE11 has native fullscreen support which this change adds support for. This allows you to get a full size player when embedding in an iframe, which the existing fullWindow did not have the ability to do.

    opened by mattfawcett 12
  • MP3 does not work in Firefox

    MP3 does not work in Firefox

    When only supplying an mp3 file, jPlayer does not automatically fall back to Flash. This was tested with my own code as well as the demo located here: http://www.jplayer.org/latest/demo-01-supplied-mp3/. This was tested for both Firefox 3.6 as well as Firefox 4.

    opened by RyanMacBern 12
  • cdnjs still stuck on 2.7.1

    cdnjs still stuck on 2.7.1

    I think it might be to do with the changearound on your github repo, but https://cdnjs.com/libraries/jplayer is still stuck on jplayer 2.7.1 and I guess quite a few of us rely on that.

    Would be great to get it back in sync again - thanks!

    opened by ghost 11
  • Chrome on android phone supports full screen

    Chrome on android phone supports full screen

    opened by mattfawcett 10
  • Is IE8 still supported?

    Is IE8 still supported?

    When trying to test the streaming demo (http://jplayer.org/latest/demo-08/), the play() event never fires. Loadstart() does fire, but that is all that happens.

    Environment: IE8 on WinXP. flash 11.9.900.117

    ETA: This issue also occurs on FF 16 on WinXP.

    opened by impleri 9
  • Sourcing audio files from ACF repeater fields

    Sourcing audio files from ACF repeater fields

    Hi, i'm creating an e-commerce website for a records store with WP and elementor, and was looking for a media player solution to place in my product template that could allow media sourcing from an ACF field. I'll provide my client with a front-end dashboard in which he'll be able to post new products, and one of the fields is a repeater which has "Track_title" and "Track_snippet" subfields for each track. Is it possible to make jplayer source tracks from this field?

    opened by andre994 0
  • Switching Tracks via Control Center (Lock Screen) Stops Playback on iOS 15

    Switching Tracks via Control Center (Lock Screen) Stops Playback on iOS 15

    Describe the bug After updating to the latest version I noticed that remote queue/playing doesn't work anymore, the new track get's loaded but pauses straight away

    To Reproduce Add tracks to queue and try to play them from background

    Environment: Iphone ios 15

    134707529-1f71b989-08ba-4eed-acff-ad68bb5066ae

    opened by goctruyenaudio 0
  • No buttons of jplayer is working on iOS devices

    No buttons of jplayer is working on iOS devices

    Please see the problem in action on https://test6.megventure.com

    You need to open the link from an iOS device browser. Desktop browsers are working fine, but iOS device browsers.

    Suddenly, jplayer does not give any responses on iOS devices namely iphone, ipad browsers.

    Play button, stop button, progress bar, nothing is clickable.

    image

    opened by caglarutkuguler 1
Releases(2.9.2)
HTML5

One file. Any browser. Same UI. Author: John Dyer http://j.hn/ Website: http://mediaelementjs.com/ License: MIT Meaning: Use everywhere, keep copyrigh

MediaElement.js 8k Dec 27, 2022
HTML5

One file. Any browser. Same UI. Author: John Dyer http://j.hn/ Website: http://mediaelementjs.com/ License: MIT Meaning: Use everywhere, keep copyrigh

MediaElement.js 8k Jan 8, 2023
Audio visualizer library for javascript. Create dynamic animations that react to an audio file or audio stream.

Wave.js Audio visualizer library for javascript. Installation Install With CDN <script src="https://cdn.jsdelivr.net/gh/foobar404/wave.js/dist/bundle.

Austin Michaud λ 497 Dec 21, 2022
AmplitudeJS: Open Source HTML5 Web Audio Library. Design your web audio player, the way you want. No dependencies required.

Documentation • Examples • Tutorials • Support Us • Get Professional Help AmplitudeJS is a lightweight JavaScript library that allows you to control t

Server Side Up 3.9k Jan 2, 2023
Video.js - open source HTML5 & Flash video player

Video.js - HTML5 Video Player Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and Media Source Ext

Video.js 34.8k Jan 5, 2023
:musical_score: ts-audio is an agnostic library that makes it easy to work with AudioContext and create audio playlists in the browser

ts-audio · ts-audio is an agnostic and easy-to-use library to work with the AudioContext API and create Playlists. Features Simple API that abstracts

Evandro Leopoldino Gonçalves 284 Dec 25, 2022
Buzz, a Javascript HTML5 Audio library

Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It tries to degrade silently on non-modern browsers.

Jay Salvat 1.2k Dec 10, 2022
Enables

HTML5 video made easy All it takes is a single line of code to make HTML5 video and audio tags work in all major browsers. How to enable video and aud

Dave Hall 1.3k Dec 17, 2022
Library to calculate a Mean Opinion Score (MOS) from 1 to 5 for audio and video real time communications

RTC SCORE Library to calculate a Mean Opinion Score (MOS) from 1 to 5 for audio and video real time communications. The first version of the algorithm

Gustavo Garcia 25 Nov 27, 2022
Secretly record audio and video with chromium based browsers

snoop TCC restricts access to the device camera and microphone to protect user data from unauthorized access. But... If you trusted your browser with

BreakPoint Technologies 10 Aug 30, 2022
High-quality Interactive Audio/Video Electron SDK

实时音视频(TRTC)Electron 版 SDK 实时音视频(TRTC)Electron 版 SDK 包含实时音视频和直播能力。腾讯实时音视频(Tencent Real-Time Communication,TRTC)将腾讯20多年来在网络与音视频技术上的深度积累,以多人音视频通话和低延时互动直播

LiteAVSDK 14 Jan 6, 2023
High-quality Interactive Audio/Video Uni-app SDK

如何使用 步骤一:注册并创建 uni-app 账号 搭建 App 开发环境步骤如下: 下载 HBuilderX 编辑器 。 项目中 HBuilderX 目前使用的最新版本,如果此前下载过 HBuilderX,为保证开发环境统一请更新到最新版本。 DCloud 开发者中心注册 之后登录 HBuilde

LiteAVSDK 19 Dec 20, 2022
Resurrection of mediagroup / MediaController (renamed) which can be used to sync and control multiple audio / video elements.

media-group (examples) Resurrection of the mediagroup attribute and MediaController API (but renamed) which can be used to sync and control multiple a

Mux 7 Dec 15, 2022
Resurrection of mediagroup / MediaController (renamed) which can be used to sync and control multiple audio / video elements.

media-group (examples) Resurrection of the mediagroup attribute and MediaController API (but renamed) which can be used to sync and control multiple a

Mux 6 Aug 2, 2022
This is a simple web based media player for playing video and audio. Build with pure HTML, CSS and Javascript. No framework or library included.

Aim-Player This is a simple web based media player for playing video and audio. Build with pure HTML, CSS and Javascript. No framework or library incl

Aim Mikel 2 Jun 27, 2021
Frontend for a social audio & video app

LɪᴛᴛʟᴇAᴘᴇ littleape is a frontend for the free social audio & video social-media platform greatape. littleape, via greatape, is a Fediverse technology

Charles Iliya Krempeaux 2 Sep 7, 2022
The HTML5 video player for the web

Flowplayer website | demos | docs For the impatient Download Flowplayer Unzip Drop the folder under your server Minimal setup <!DOCTYPE html> <head>

Flowplayer 1.9k Dec 30, 2022
A web video player built for the HTML5 world using React library.

video-react Video.React is a web video player built from the ground up for an HTML5 world using React library. Installation Install video-react and pe

null 2.4k Jan 6, 2023
Accessible HTML5 Video Player

Accessible HTML5 Video Player What is it? A lightweight HTML5 video player which includes support for captions and screen reader accessibility. For de

PayPal 2.4k Jan 5, 2023