Code Monkey home page Code Monkey logo

jplayer's Introduction

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

jplayer's People

Contributors

afterster avatar bistory avatar gitter-badger avatar hobiecat avatar iking0980 avatar maboa avatar mdingena avatar nervo avatar popol1991 avatar rixvet avatar ryanramage avatar s10wen avatar smidgen avatar stefanbruens avatar sterlinghirsh avatar thepag avatar thormeier avatar tolia avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jplayer's Issues

Circle Player Theme

Please can I get a raw source of the Circle player Images and sprites, i like the concept and would like to give it my colors!

jPlayer Play:Time - media buffer Problem

Hello,

I really like jPlayer, but I have a problem and I hope I can find the solution.

I am using jPlayer for my radio website. I am having one 12 hours MP3 file been set to jPlayer.

It is working fine in local machine, but after uploading it online, the problem appears.

The radio logic is getting the current time, converting it into seconds -using a javascript function-, then playing the matched seconds in the file using the (play,time) jPlayer function.Passing the javascript return value to the time argument. What happen is that when setting the time to a big period like 30 mins or an hour or more (converted into seconds), the jPlayer starts to buffer the entire media till that position, which cause a huge delay untill playing the required position.

Is there anyother jPlayer function that I can use to play the media from a specific position direcly without buffering what is before it? I need to buffer only from the given time.

Thanks !
Mohamed Nagieb

http://eldoniafm.com/RadioModule/popRadio.html

Removing IE non secured element warning (+solution)

Hello! :)

When loading jPlayer in a secured context (https://...), a warning is displayed by IE (7+8 at least) asking whether we want to display non secured elements among secured one.

To remove this ungraceful warning, the URL value of the attribute "codebase" must be secured.
=> Here is a solution: replace line 355:
html_obj += ' codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"';
by
html_obj += ' codebase="' + document.URL.substring(0,document.URL.indexOf(':',4)) + '://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"';

Could you fix this the next release?
Thank you.

Recovering from "flash reset" does not restore volume

When the Flash solution is being used and a "flash reset" is encountered, the library handles it by reloading the media and setting the playhead to the last position (playing if it was already playing). However it doesn't restore the volume setting.

AAC support by Flash fallback

Hello again,

Just recently I've stumbled upon a problem whilst launching a player in freshly installed IE8 on Windows XP. It turned out the culprit is jPlayer.swf, which doesn't support AAC playback when using Flash plugin older than v10 (to be precise the ready callback was never called). After fixing this bug, I came to two conclusions:

  • Apart from a note at http://www.jplayer.org/latest/developer-guide/#jPlayer-files-plugin, there's nowhere mentioned jPlayer requires (at least practically) Flash 10. It would be worth mentioning it in a bit more exposed place in the documentation. On the other hand, what's the ground for such a limitation? Most of the modern codecs were introduced in Flash 9.
  • Distinction between NO_SUPPORT and NO_SOLUTION events is confusing. I know, they are called by different methods, but in the end shouldn't they be merged as they signal more or less the same problem?

These are just thoughts that kept me busy lately, so I'm not sure whether creating an issue is the best idea, but I'd like to hear your opinion on the above questions.

Cheers!

Michal

Destroy does not stop stream

Running "destroy" on a running mp3 stream (shoutcast) does not actually stop the stream. The sound stops but the music is still downloaded.

See http://freshair.org.uk/dev/live.php for example. Play the stream then press Hi-fi or low-hi with dev-tools open on network.

Google Chrome 13.0.782.41 beta

Modify Buffer Time

Hello, jPlayer is great, i have a question is there any way to change the amount of time buffered before the song begins playing? currently is 10secs and if the connection is slow it keeps stopping, i would like to buffer first like 40 secs before playing... is it possible? thanks

ACC Stream

Are there any speccific needs, on the ACC stream? Can not make it load, at the player at all?

Is there any issue?

Add method to stop buffering

I have a setup with two instances of jplayer which I use to get a nice crossfade effect while switching from one track to another. This works quite well but there is one major problem: It's not possible to stop the buffering process of the first instance without stopping the playback.

On a slow internet connection, both instances buffering at the same time cause a noticeable delay which I'd like to avoid. A method to stop the buffering process would be greatly appreciated.

Doesn't Unpause in Linux FF3

Tried this using flash and html5 with the same results. Once paused it refuses to start playng again. When you try and use the seek tool and locks back to its original spot.

Chrome on Linux won't play if m4a is supplied

I'm using Ubuntu 10.10, tested in both Chromium stable and Chrome dev, and on two computers, same result.

I've experienced the same issue in my own projects, and the solution has been to list mpeg source as last, otherwise chrome thinks it can play the file, but when reading it, realizes "oh, yeah, I'm on Linux, nevermind", so the file doesn't get played.

Initial volume not being set in Chrome 4 when using HTML5

Chrome 4 has a problem setting the initial volume of an tag. This causes the initial volume to always be 100% rather than that defined by the {volume:50} in the constructor. This also affects when changing track using jPlayer("setFile", mp3 [, ogg]), where the new track will start playing at 100% volume regardless of previously changing the volume to a new value. Changing the volume after play beings does work though.

For more info see: jPlayer Google Group thread

How do we use base64 data as an audio source?

Is it possible to use base64 encoded data for the source file.

For example, using the audio tag, it is very possible to do the following:

<audio preload="auto">
<source src="data:audio/mp3;base64,{base64_string}" />
</audio>

The above will work in Safari. You can also add an another source tag for ogg for Firefox.

Is it possible to do this with JPlayer? Also, can we use mp4 instead of mp3?

Thanks.

1px load bar gap in chrome

I noticed that when the loading bar has reached 100% in chrome that there is a 1 pixel gap on the right of the jp-load-bar.

If you set a background color on jp-progress and jp-load-bar, when the file has fully downloaded you can see the jp-progress background show through on the right.

If you look at the style using chromes developer tools you can see that the width is something like 99.999%, but this causes the problem.

Without digging through the code too much, a quick fix that worked for me was in

jPlayerOnProgressChange: function(lp, ppr, ppa, pt, tt)

Adding:
lp = Math.ceil(lp);

Thanks :)

iPad doesn't play

Hi,

I've confirmed this with your demo.
The player has the pause icon showing as if it's playing, but no sound comes out and no progress, and no time change.

If I click the pause button, then click the play button it will start to play normally.
Hopefully this is a quick fix for you. Thanks.

Also, on the iPad, the volume buttons and bar don't work, but it's probably an iPad thing where you can't control sound. Maybe an option to hide those controls where they don't work?

thanks again,
Michael

Broken Progress Bar When Soft-linking

When using the HTML5 player and accessing mp3 files through a php script instead of hardlinking (by using something like setFile("myfolder/playtrack.php?trackID=1234"); where playtrack.php grabs the mp3 file and outputs it with fpassthru() and the correct headers) the progress bar doesn't update to show the current play position or the amount buffered.

In Chrome it seems the problem is that the length of the audio tag's buffered attribute is always 1, making jPlayerController think it has a valid buffered attribute when it fact it never changes and causes the progress bar to freeze.

In Safari the buffered attribute's length is 0 but the duration attribute is infinity/NaN so jPlayerController can't figure out how long the track is and just shows NaN:NaN for total/buffered time on the right. I have the Content-Length header set in the script that serves the mp3.

Another problem is that in both browsers setting audio.currentTime (in playHead) doesn't seem to work. I hacked the load bar to be 100% and checked to make sure the playHead function is grabbing the correct time for the location clicked but the mp3 keeps playing where it's at.

PS - thanks for the rad player, it's a crazy neat bit of code.

Support for 'FLV' video

Hi, thank you for your great project.
Since the player has a flash fallback I was quite puzzled to learn that it doesn't (evidently) support flash "old-school" sorenson/h.263/vp6 video. Is this a deliberate decision? I know flv is theoretically outdated, but I think due to its spread it should maybe still be considered.
Well, it works to just feed an flv file to the 'm4v' parameter, but, in nearly all cases I suppose, only if 'solution' is set to 'flash' only. So I'd suggest to add the format:
flv: {
codec: 'video/x-flv; codecs="flv"',
flashCanPlay: true,
media: 'video'
},
and in _flash_setVideo:
case "flv":
I'm not sure about the codecs part, maybe it should be something like 'sorenson' or other identifier, but I guess it doesn't really matter. What do you think?

Doesn't Work in Webkit (Safari and Chrome)

I am using the following code in a site, so there are multiple instances of jplayer on a page. Works fine in Firefox and IE but not in Safari or Chrome. Some tracks start then stop after a split second, others don't even start.

-- invocation of the player, then on complete run the stop_all_sounds() function (i have 8 on one page but there are like three in this example)

$("#jqplayer_1").jPlayer( {
ready: function () {
this.element.jPlayer("setFile", "http://www.domain.com/mp3/test.mp3");
},swfPath: 'http://www.domain.com/js' });

$("#jqplayer_1").jPlayer("onSoundComplete", function() {
stop_all_sounds();
});

-- when the play button is clicked all other sounds or buttons are set to default then relevant stuff done

$("#listen_1").click(function(){
stop_all_sounds();
$("#jqplayer_1").jPlayer("play");
$(this).hide();
$("#stop_1").show();
});

function stop_all_sounds(){
$("#jqplayer_1").jPlayer("stop");
$("#jqplayer_2").jPlayer("stop");
$("#jqplayer_3").jPlayer("stop");
$("a.stop").hide();
$("a.listen").show();
};

potential memory leak

I was trying to track down a bad memory leak in our implementation of jPlayer.

There are two things:

  1. memory consumption during buffering, it seems that the mp3 gets loaded entirely in memory, but cannot be discharged after the use
  2. memory leak of about 100k/sec during play, leak stops when paused.

About point 2 I was trying to debug the hell out of our plugins, but then I saw the official updated demo at http://www.happyworm.com/jquery/jplayer/latest/demo-01.htm and it's leaking.

I did noticed with safari at first, with a normal osx activity manager, then later switched to Chrome dev channel for heap snapshot and tab task manager to help track down the leak.

We are currently still working on it.

Android 2.2 browser crash in offline app

I'm trying to use jPlayer in offline web application. When the app loads from cache it crashes android browser.
Here is a simple demo project to reproduce the issue: http://dl.dropbox.com/u/19560069/jpcrash-android-2.2-20110805.zip

Steps to reproduce:

  1. open the app in browser for the first time, wait for download progress to finish; check that the app works ok;
  2. open any other page (or blank page, refresh doesn't count);
  3. go back to the app (the app now should load from browser cache) -- this would crash the browser.

jPlayer 2.0.0
jQuery 1.6.2
Android 2.2
Flash Player 10.1.92.10
(same on Flash Player 10.3.185.25)
Device: HTC Desire

iPhone support

iPhone OS 3.0 supports tag, but jPlayer doesn't work.

Google Chrome seekbar not working on local script

Hello,

I have a problem. I created a small website on my local machine on Arch Linux and have Google Chrome v. 10.0.648.204 installed.
I have experienced this behavior on other Linux distributions also ( Ubuntu ) for other Chrome versions ( 8.x , 9.x ). On the local script the seekbar does not work but if I put it on a remote server works.
Also I tried making a static layout ( because on my website the loading of the song is done by loading an ajax script which does:
$("#jplayer").jPlayer("setMedia", {
mp3: "test.mp3"
}).jPlayer("play");
) and it works perfectly.
Any ideas on why this is the issue ?

Thanks,
Rares

clearMedia makes extraneous HTTP request

When playing audio in IE9 using native audio, if you call jPlayer("clearMedia") it will make an extra request for the root document of the current directory (for example "/"). I have traced the cause of this to the setting of the src attribute on the audio tag to "". The problem is that most browsers interpret an empty src attribute as an actual path relative to the current page. See http://developer.yahoo.com/performance/rules.html#emptysrc for more information.

Fortunately it seems that most browsers that I've tested, such as Chrome, Firefox, and Safari do not attempt to load the file as soon as the src attribute is set, so this does not appear to be a problem for those browsers. However, in IE9 it does immediately request the document via HTTP.

We are seeing this on our site each time a song ends and plays a new song. A request is made for our home page which then sends 200k over the wire. Not only does this waste bandwidth, it throws off server reports.

Steps to reproduce:

  1. Start IE9 and open the Dev Tools window (F12)
  2. Click on the Network tab and "Start capturing"
  3. Load the jPlayer demo page at http://www.jplayer.org/latest/demo-01/
  4. Play the song for a few seconds, then pause
  5. In the dev tools, click on the "Console" tab and type the following into the console:
    $("#jquery_jplayer_1").jPlayer("clearMedia")
  6. Go back to the "Network" tab and notice that a request to http://www.jplayer.org/latest/demo-01/ has been made

Workaround:
By changing the jPlayer code to set the src to "about:blank" instead of "" it seems to fix this problem (or forcing Flash but that's pretty heavy handed just to fix this bug)

Seeking in MP4 audio file with Flash solution plays beginning of track

I need to start playing an AAC+ encoded audio file from a point other than the beginning (i.e. a few minutes in). Using the API, this works fine just by passing a "time" parameter to play() or pause() immediately after the setMedia() call. Except in the case of browsers that do not use native HTML5 audio for AAC+ and fall back on Flash (Firefox, IE).

In those browsers, it will sometimes play a brief portion of the start of the audio track before advancing the playhead to the desired position. For songs that start with a beat, this is quite noticeable!

You can see what I mean by trying the following example:
http://jsfiddle.net/E7FZh/
(you may need to try a few times before you can reproduce it)

Interestingly, this problem doesn't occur when playing MP3 files via the Flash solution:
http://jsfiddle.net/dS7vK/

Feature Request: jPlayerPlaylist track lengths

Mark, first of all thanks for jPlayer. It's a spectacular tool and it's working flawlessly for me.

I know this has been raised before in other places in the past, but what are your current thoughts on getting track lengths (durations) into jPlayerPlaylists (preferably pulled directly from the file)? Is Flash the block here? Alternatively, how about getting a hook into the playlist object array such that any given track lengths render in the player?

I'm currently focusing on creating some skins for jPlayer that I'd like to give out to the community and features like these would be a huge help in both my efforts and, I suppose, the adoption rate for jPlayer (and correspondingly interest in skins for jPlayer).

Flash MP4 player occasionally fails to get "ended" event at end of song

Recently we noticed that when playing MP4 audio (AAC-HE encoded) on Firefox 4 that sometimes a song would play to the end but jPlayer would not emit an "ended" event back to our code. This then prevents us from playing the next song in the list.

Digging in a bit deeper and enabling debugging in the Flash code, I have traced it to some code in JplayerMp4.as -- specifically the handler for the NetStream.Play.Stop event. It looks like it only emits the "ended" event when the playhead is within 150ms of the end. However in my testing I have seen this value vary anywhere from 93ms to 139ms and sometimes as high as 185 or 186ms. It is these cases when it is > 150ms that the code fails to emit the ended event and therefore my playlist just hangs.

Would it be possible to loosen the tolerance for this constant? It seems to be like even 500ms to 1000ms would be acceptable for most cases because do people really care if the audio stops to buffer with less than a second remaining rather than just end?

Test environment:
Mac OS X 10.6.7
Firefox 4.0.1
Flash 10.2.159.1 (debug)

Support for other codecs such as AAC

It would be nice to be able to play AAC (m4a) audio files using jPlayer. Even though only Safari on OS X seems to be able to play this codec natively, all other browsers could use Flash. The only problem I can see is that AAC support wasn't added until Flash Player 9 -- although you could still compile the SWF with MTASC as Flash 8 and just detect the version of the Flash Player at runtime to determine whether or not AAC is supported).

jPlayer.stop() overrides default jQuery stop() method

How to reproduce:

  1. Link jplayer javascript file into your code and initialize jPlayer on some element.
  2. On another element start some animation, let's say, 5 secods long
  3. When you try to stop animation using jQuery method stop() after, lets say 2 seconds, it wont work, because jPlayer overrided definition of that method by:
    $.each(methods, function(i) {
    $.fn[i] = this;
    });

at the end of the plugin

Extra request for page because of missing src in img

It seems that, in Chrome at least, creating an img that has no src results in the empty src being treated as equivalent to the URL for the document, so the browser requests the document again and tries to interpret the HTML as an image. The img is created starting at line 480 here:

this.htmlElement.poster = document.createElement('img');

Maybe this element shouldn't be created until there's a src?

Android Device issue

I tried your most recent demo using my Nexus One and jplayer tries to load the flash fallback. I wonder if the android browser doesn't support the audio tag just yet but I can't find any evidence that it doesn't.

Showing duration time on iPad

Hey there!

The length of the audio file is not shown on iPad. On load the player displays 00:00 / 00:00. After playing the audiofile it is displayed correctly.

Had anybody else that problem? Is there a fix?

Thank you very much and best regards,
florian

Safari 5.x on Snow Leopard

When using a single player with track switching (http://versuzessentials.com), the behaviour in Safari 5.x on OS X Snow Leopard is quirky: some audio files play and others don't. All of the JavaScript calls are executed and there is really no reasoning behind which tracks play and which tracks don't.

I think the problem is QuickTime-related, because Chrome does not give any errors.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.