{"id":3448,"date":"2013-09-11T21:18:04","date_gmt":"2013-09-11T21:18:04","guid":{"rendered":"http:\/\/www.dognmonkey.com\/techs\/?p=3448"},"modified":"2013-10-08T16:39:59","modified_gmt":"2013-10-08T16:39:59","slug":"john-dyer-html5-player","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/techs\/john-dyer-html5-player.html","title":{"rendered":"John Dyer HTML5 Player"},"content":{"rendered":"

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<\/a> 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.<\/em><\/p>\n

Download the scripts and put on the footer or header. If you’re using many jquery, it’s a good\u00a0practice to define jquery.noConflict with the scripts.\u00a0<\/em><\/p>\n

<script src=”\/idogjs\/johndyer\/build\/jquery.js”><\/script>
\n<script src=”\/idogjs\/johndyer\/build\/mediaelement-and-player.min.js”><\/script>
\n<link rel=”stylesheet” href=”\/idogjs\/johndyer\/build\/mediaelementplayer.min.css” \/>
\n<script type=”text\/javascript”>
\nvar $jD=jQuery.noConflict();
\n$jD(document).ready(function(){
\n});
\n<\/script>
\n<script src=”\/idogjs\/johndyer\/ijohndyer.js” type=”text\/javascript”><\/script><\/p><\/blockquote>\n

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.<\/em><\/p>\n

$jD(document).ready(function() {<\/p>\n

$jD(‘audio,video’).mediaelementplayer({<\/p>\n

success: function(player, node) {
\n$jD(‘#’ + node.id + ‘-mode’).html(‘mode: ‘ + player.pluginType);
\n}
\n});
\n});<\/p><\/blockquote>\n

When everything is done, all we need to do to place an audio player is coded like this.<\/em><\/p>\n

<audio controls=”control” preload=”none” src=”\/music\/idog\/idogsunday.mp3″ type=”audio\/mp3″><\/audio><\/p><\/blockquote>\n

For mp4 video player the code is like this.<\/em><\/p>\n

<video width=”560″ height=”315″ src=”\/media\/teststuff\/tasting.mp4″ type=”video\/mp4″
\nid=”player1″ poster=”\/media\/teststuff\/tn_cab04_75.JPG”
\ncontrols=”controls” preload=”none”><\/video><\/p><\/blockquote>\n