jplayer / jPlayer

jPlayer : HTML5 Audio & Video for jQuery
http://jplayer.org/
Other
4.6k stars 1.47k forks source link

Easier install for noobs? #256

Open ghost opened 9 years ago

ghost commented 9 years ago

I see from the dev branch that you're experimenting with Mustache templating. Great! And I was wondering if this might be the start of a super-easy jplayer install for noobs.

At the moment the docs suggest download and install to server, and from the looks of the forums, this is where a lot of people mess up - wrong swfpath, forgetting to include jquery, old versions etc.

The docs could simplify things a little by also saying something like:

"Quick start: download the skin of your choice, and add these lines to the footer of your page, just before the </body> tag:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.7.1/jquery.jplayer/jquery.jplayer.min.js"></script>

and add this line if you want the playlist.

```<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.7.1/add-on/jplayer.playlist.min.js"></script>```

But seeing as the skins are ALSO hosted on the CDN, in theory, you could turn the whole thing into a single line plugin: One line of javascript would load jquery if not already loaded, document.write all the correct css URLs into the header and script URLs into the footer, and Mustache could be used to write out the jplayer object to the DOM.

Given that there's code out there which will seek out items of a certain class, "suck them into" the playlist object and then hide the items, you could end up with instructions as simple as

"copy and paste these two lines into your page

<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.7.1/jquery.jplayer/jquery.jplayer.min.js"></script>
{{ jplayer pinkflag }}

And then add your music in this format

<a class = "jp-pl-item" href="http://test.com/1.mp3">Song 1</a>
<a class = "jp-pl-item" href="http://test.com/2.mp3">Another song</a>
(...)

Madness or a reasonable idea?

thepag commented 9 years ago

Worth thinking about... Probably better to integrate this into the jPlayer.injector since that will be a polyfill for HTML5 media and kinda do everything even easier and using web standards... But alas, that is also WIP and in its dev branch for the polyfill stuff.