Tips And Tricks | WordPress

John Dyer HTML5 Player

September 11, 2013 / 248 views

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.

johndyer playver

Paid Links

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.