Template using the mediaelement.js for mp3?

[fafdk]

Hi

Do you know how to make a template which uses the mediaelement.js for playing mp3 or other media audio formats?

I have created a 5-col-row with additional “language” and “author” cols, which looks like this:

<tr><td><a href="%file_url%">%file_display_name%</a></td><td>%file_author%</td><td>%file_languages%</td><td>%file_size%</td><td>%file_hits%</td></tr>

I’m about to create a 6-col-row template which incorps the mediaplayer (mediaelement.js). Maybe one which opens in a new window. Do you have a hint or a tip on how to make this the right way?

Thx

/FAF

[fafdk]

Made a test template with the mediaelement.js audio function. Seems to work ok, it’s just not the most elegant display, but it works with the core mediaelement.js.

<tr><td><a href="%file_url%">%file_display_name%</a></td><td>[audio mp3="%file_url%"]</td></tr>

Really interesting with the template system, it opens up for endless ways of doing things.

Thx

[Fabian]

Nice to know that this is working. What Plugin are you using for the [audio…] shortcode?

You can also use the HTML5 audio element http://www.w3schools.com/html/html5_audio.asp
:

<audio controls autobuffer preload="none">
  <source src="%file_url%" />
</audio>

[fafdk]

No plugin. Mediaelement.js is in the core now. It degrades to flash too, if no HTML5 support is present.

Right now I’m trying to put it all together in a nice design.

[fafdk]

You should utilize the mediaelement.js shortcode [audio mp3=""] in your plugin. Maybe change the MP3 template, so that you can use HTML5 and Flash instead of your FLV player.

Also I’m looking for good ideas on how to build up a nice template with tables and all. I’ve just installed the “tablepress” plugin, to see if I can get some use of it.

I will also make some research on W3S, so that I can understand the HTML5 directive a little better.

Thank you for your input.

[fafdk]

Hi again

Tried to incorporate accordions with the mediaelement.js mp3 player, with the help of a shortcode plugin called: “WordPress Twitter Bootstrap Plugin”.

I created a template like this:

[TBS_COLLAPSE accordion='y'][TBS_COLLAPSE_GROUP title="%file_display_name%" open='n'][audio mp3="%file_url%"][/TBS_COLLAPSE_GROUP]

And from what I can see, then it works, but it seems that the mediaplayer.js is loading in the background on every entry and making the page somewhat slow to load, because I have allot of files on that page. If I try without the accordion, and just with the mp3 player in a table for each file, then it is slow as well, can’t really see a difference there. If I make a separate description page with only one player, then it would load fast of course, but with accordions it could really be eye-candy to have all on one page.

I would have to learn some more about how to prefetch the player, maybe load it in the footer or in a popup. I like the idea of having the mediaplayer in the “footer”, so that the users can look around on the site while listening to the mediafile.

Did you ever hear about “WordPress Twitter Bootstrap Plugin” and if there are any conflicts with it?

Did you think about integrating the WP3.6 core mediaplayer into your plugin? – if so, did you contemplate on using the mediaplayer in the footer or at the bottom of the page, or using accordions?

Also found a page with some jquery components – which maybe could be of some use for you. Don’t know if the page is any good, but I include it anyway.

I think that the media-section of your plugin could bring your plugin to a broader audience, if you made use of the mediaelement.js integration. I know it’s only for WP3.6 and many are still using the older versions, but you could make it so that those with WP3.6 could make better use of it and for their multimedia needs. When your finished with ironing the last bugs out of your plugin, then you maybe could give it some thoughts? I also wish to learn something here 🙂

Thank you for your time and for your plugin.

/FAF

[Author]

Posts