Suggestion: in-page podcast player for premium content

[Kevin Beal]

I was noticing that in order to listen to premium content you have to download the file to your computer and then play it in iTunes or something like that. I think it would be cool to be able to play it straight in the page. Maybe it could just be a simple jPlayer like the one that was at the bottom right of the old chatroom. The podcast URL doesn't look like it's being loaded into the template and is behind some kind of api, so maybe the api can expose it, but if you can get it you can just throw it right into the jPlayer initializer.

 

jPlayer can be lame and fickle sometimes, but I've used it in a few projects and could help out if it seemed like a good idea.

[JamesP]

This is the sort of thing that I would like to see if there are any existing plugins because of the security settings we've got in place, but it's a good suggestion to put on the list.

[JamesP]

This is done.

(There weren't any existing plugins... to get this done, I had to write a small hook to get the MIME type out of the database, then put jwplayer in there so that it would only load for mp3 files!)

[PatrickC]

Not sure whether this interested you guys.

 

http://www.podsnack.com/

 

They look pretty cool and customisable if you ask me, but then again I have no idea about the backend of course.

[JamesP]

I already implemented something. Please let me know if you have any issues.

 

I'm currently aware of an issue with the iPad.

[PatrickC]

Ah, sorry James, seems I didn't read your last post to mine properly. That works just fine for me at least.

[Kevin Beal]

Awesome! Works great

[Kevin Beal]

I just realized that the jwplayer doesn't play the podcast all the way thru, it actually stops somewhere around a half hour in

 

Other than that, it's a nice little player. Having a volume level would be cool to have on the player, but I can just adjust my speakers, no big deal. The stopping half way thing tho makes me cry just a little bit :_(

[JamesP]

You've got to shoehorn it in to the template a bit... perhaps you could come up with a jPlayer version that I can stick in there? jQuery 1.7 is what's loaded on this site.

 

I need to know what files to download (they should be located in /public/jplayer/), and if you can give me a code block that references a mp3 file, hopefully that will be enough to fix the odd issues we're seeing with jwplayer.

 

I have heard one or two other reports that podcasts stop downloading before they're complete, though, so it might not be an issue with the player.  It might then be worth opening a bug with ip.board or something.

[Kevin Beal]

I'll throw something together soon!

[Kevin Beal]

Here's a working couple of snippets using jQuery 1.7.1 and the newest jPlayer.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://jplayer.org/2.4.0/js/jquery.jplayer.min.js"></script>

Here's a player skin that looks almost exactly like the JWPlayer currently being used (includes volume bar) with the correct CSS classes attached to the right elements for the player to actually do stuff:

<link href="http://dl.dropbox.com/u/2557221/online/demos/jplayer-black-and-yellow/skin/jplayer-black-and-yellow.css" rel="stylesheet" type="text/css"><div id="jPlayer-holder" class="jp-jplayer" style="background-color: rgb(0, 0, 0);"></div><div class="jp-audio-container">    <div class="jp-audio">        <div class="jp-type-single">            <div id="jp_interface_1" class="jp-interface">                <ul class="jp-controls">                    <li><a class="jp-play" tabindex="1" style="display: block;">play</a></li>                    <li><a class="jp-pause" tabindex="1" style="display: none;">pause</a></li>                    <li><a class="jp-mute" tabindex="1" style="">mute</a></li>                    <li><a class="jp-unmute" tabindex="1" style="display: none;">unmute</a></li>                </ul>                <div class="jp-progress-container">                    <div class="jp-progress">                        <div class="jp-seek-bar" style="width: 100%;">                            <div class="jp-play-bar"></div>                        </div>                    </div>                </div>                <div class="jp-volume-bar-container">                    <div class="jp-volume-bar" id="volumeBar">                        <div class="jp-volume-bar-value" style="width: 80%;"></div>                    </div>                </div>            </div>        </div>    </div></div>

And here's a mini jQuery plugin I just wrote to initialize the player knowing only the element you're loading the player into and the path to the mp3 file:

(function($){    $.fn.playerInit = function(podcastURL) {        this.jPlayer({            ready : function(event) {                $(this).jPlayer('setMedia', {                    mp3: podcastURL                });            },            preload  : 'auto',            swfPath  : 'http://www.jplayer.org/latest/js/Jplayer.swf',            supplied : 'mp3',            solution : 'flash, html',            cssSelectorAncestor : '.jp-audio-container'        });    }})(jQuery);

You initialize it by using:

$('#jPlayer-holder').playerInit('http://media.freedomainradio.com/feed/FDR_2443_Truth_About_Bradley_Manning.mp3');

This has been tested in Chrome and Firefox. I have no windows computer to test it with, so I don't know about the IE browsers. The online tool BrowserStack doesn't support flash apparently which is required since the podcasts only come in mp3 and not ogg (damn you Firefox!).

 

Here's a link to a working demo of exactly the code above. (It won't work locally on your computer so you have to develop it remotely.)

[JamesP]

Hey, can you give me a ZIP or something that contains all of necessary files? I implemented the player but I think there are some XSS issues preventing the SWF from reading the mp3 file.

[Kevin Beal]

Hey, can you give me a ZIP or something that contains all of necessary files? I implemented the player but I think there are some XSS issues preventing the SWF from reading the mp3 file.

 

Heya James!

 

So I've got a .zip here containing:

- The stylesheet

- The sprite for that stylesheet

- the .swf file for jPlayer 2.4.0

- and jPlayer.2.4.0.min.js

 

Here's the download link.

 

It appears to me that the only thing wrong with the player is that the stylesheet isn't being loaded. I did however run into an issue like you're describing when I tried to develop it on my machine, but Chrome prevents .swf files from being loaded (remotely) when you do that for security reasons I don't understand.

 

If you do use these files you may have to update the paths used like in the swfPath property of the jPlayer initializer and for the image in the stylesheet.

 

Also I noticed that all jQuery selectors are returning null on this domain. In the javascript console, I tried doing this:

$('head').append('<link href="http://dl.dropbox.com/u/2557221/online/demos/jplayer-black-and-yellow/skin/jplayer-black-and-yellow.css" rel="stylesheet" type="text/css">');

so that I could load in the stylesheet, but all selectors (or any usage of $() for that matter) returns null. On a global level anyway. Maybe it's a security thing I've just never encountered before.

 

I did use the Chrome developer tools to insert the stylesheet, and it seemed to work just fine. That is Chrome anyway...

 

Let me know if I can provide any more help!

[JamesP]

Yes, it's a XSS (cross-site scripting) prevention thing that became standard in the past few years.  What that means (among other things) is that the browser won't transfer cookies across different hostnames unless you explicitly indicate that it's OK to do so.  This is a problem for the download files since the files are effectively behind a paywall (so to speak).

 

It's just easier to make sure everything is on the same server, or that you control all the domains in question.

 

----

 

OK, cool, it seems to be working OK, at least initially.

 

One question: can we not have it automatically start downloading right away? I think that will inflate the download count.

[Kevin Beal]

To not have it download right away you can change the jPlayer initializer "preload" property to "none". like so: 

(function($){    $.fn.playerInit = function(podcastURL) {        this.jPlayer({            ready : function(event) {                $(this).jPlayer('setMedia', {                    mp3: podcastURL                });            },            preload  : "none", // RIGHT HERE <----            swfPath  : 'http://www.jplayer.org/latest/js/Jplayer.swf',            supplied : 'mp3',            solution : 'flash, html',            cssSelectorAncestor : '.jp-audio-container'        });    }})(jQuery);

In the documentation they do warn though that: "Preload is a hint to the user agent, not a command. Some browsers ignore this option."

 

I think generally it works fine and am not aware of what the exception to this rule is.

[JamesP]

Cool, man, thanks! Skipping the preload works in Firefox at least

[Kevin Beal]

Works in Chrome too! Very cool

[Freedomain]

Kevin to the rescue!

[Kevin Beal]

Lol. Thanks Mike

 

It feels good to help out.