These days with many browsers across the boards, HTML5 seems to get along with all of them. Flash player may not work in some devices. I found this John Dyer HTML5 player that can play very well on WordPress. It’s simple to use and it does work well as core, but if you don’t have WordPress and use it on any other platform, this is how I would do it.
Download the scripts and put on the footer or header. If you’re using many jquery, it’s a good practice to define jquery.noConflict with the scripts.
<script src=”/idogjs/johndyer/build/jquery.js”></script>
<script src=”/idogjs/johndyer/build/mediaelement-and-player.min.js”></script>
<link rel=”stylesheet” href=”/idogjs/johndyer/build/mediaelementplayer.min.css” />
<script type=”text/javascript”>
var $jD=jQuery.noConflict();
$jD(document).ready(function(){
});
</script>
<script src=”/idogjs/johndyer/ijohndyer.js” type=”text/javascript”></script>
The ijohndyer.js is my special scripts to take care of all the scripts so we don’t have to repeat the scripts on every post or every player we use.
$jD(document).ready(function() {
$jD(‘audio,video’).mediaelementplayer({
success: function(player, node) {
$jD(‘#’ + node.id + ‘-mode’).html(‘mode: ‘ + player.pluginType);
}
});
});
When everything is done, all we need to do to place an audio player is coded like this.
<audio controls=”control” preload=”none” src=”/music/idog/idogsunday.mp3″ type=”audio/mp3″></audio>
For mp4 video player the code is like this.
<video width=”560″ height=”315″ src=”/media/teststuff/tasting.mp4″ type=”video/mp4″
id=”player1″ poster=”/media/teststuff/tn_cab04_75.JPG”
controls=”controls” preload=”none”></video>
Since the scripts is taken care in the head or footer already, we never have to worry about it again.
