Create Your Own Custom HTML5/Flash Player

This code will work on any website/server not just ours.This is HTML5 based but if the browser isnt able to render HTML5 it switches back to flash player.

Post this code in the head part.

Replace stream name,ip,port with your own.

 

<link href=”http://www.shoutcastireland.com/skin/blue.monday/jplayer.blue.monday.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js”></script>
<script type=”text/javascript” src=”http://www.shoutcastireland.com/js/jquery.jplayer.min.js”></script>
<script type=”text/javascript”>
//<![CDATA[
$(document).ready(function(){
var stream = {
title: “streamname”,
mp3: “http://ip:port/;stream/1/”
},
ready = false;
$(“#jquery_jplayer_1”).jPlayer({
ready: function (event) {
ready = true;
$(this).jPlayer(“setMedia”, stream);
},
pause: function() {
$(this).jPlayer(“clearMedia”);
},
error: function(event) {
if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
$(this).jPlayer(“setMedia”, stream).jPlayer(“play”);
}
},
swfPath: “js”,
supplied: “mp3”,
preload: “none”,
wmode: “window”
});
});
//]]>
</script>
Post this code where you would like the player on your site.
<div id=”jquery_jplayer_1″ class=”jp-jplayer”></div>
<div id=”jp_container_1″ class=”jp-audio-stream”>
<div class=”jp-type-single”>
<div class=”jp-gui jp-interface”>
<ul class=”jp-controls”>
<li><a href=”javascript:;” class=”jp-play” tabindex=”1″>play</a></li>
<li><a href=”javascript:;” class=”jp-pause” tabindex=”1″>pause</a></li>
<li><a href=”javascript:;” class=”jp-mute” tabindex=”1″ title=”mute”>mute</a></li>
<li><a href=”javascript:;” class=”jp-unmute” tabindex=”1″ title=”unmute”>unmute</a></li>
<li><a href=”javascript:;” class=”jp-volume-max” tabindex=”1″ title=”max volume”>max volume</a></li>
</ul>
<div class=”jp-volume-bar”>
<div class=”jp-volume-bar-value”></div>
</div>
</div>
<div class=”jp-title”>
<ul>
<li>streamname</li>
</ul>
</div>
<div class=”jp-no-solution”>
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href=”http://get.adobe.com/flashplayer/” target=”_blank”>Flash plugin</a>.
</div>
</div>
</div>