In short, I’m using the new WordPress 3.6 shortcode (which is mediaelement.js) inside an HTML table that is enhanced with a javascript library called datatables.
This is my page: http://thetracksmiths.com/beats/fight-club/
If you view the above page on any PC or mac (in any browser), all is well with the world. View it on an iPhone or iPad, and the players inside the table will not work. After an exhausting search for answers, here’s what the author of datatables had to say after some testing (notice what’s in bold at the bottom):
So I’ve just had a bit more of a look into this, and I can fairly
easily replicate the issue without DataTables. All that needs to be
done is to remove the element from the document and then add it back
in again. The media player simply fails to play after that on iOS (and
this removal and addition is fundamental to how DataTables works).For example, if you disable DataTables on your page and add this code:
jQuery(document).ready( function ($) {
var a = $('#tablepress-2 tbody tr:eq(2)')[0];
a.parentNode.removeChild( a );
$('#tablepress-2 tbody').append( a );
} );
All of the players in the table will work, expect the very last row
(the one that has been removed and re-added).So its not something that DataTables is doing wrong, but it is a
problem in the media player that is triggered by the actions
DataTables take. As I say, this is fundamental to DataTables and isn’t
likely to change, so we need to know either if the author of the media
player library can fix it for when items are removed and then added
back into the DOM. Or if there is some sort of re-initialisation that
can be called when the element is added back into the DOM.
If I’m understanding all this correctly (I’m no coder!), what the author is saying is that something in the audio code is playing nasty with iOS when it’s taken off the page and then re-added. Is this a genuine bug? How can this be fixed?
