Search code examples
htmljplayer

jplayer working in Visual Studio 2010 but not in browser


I am using jplayer for audio in HTML5. The audio works when I am testing in Visual Studio 2010 and viewing in browser (from VS2010). However, if I am not in VS2010 and doubleclick on the .htm file to view in browser the audio is not working. I am using IE9. Here is my code:

html5:

<script type="text/jscript" src="jQuery.jPlayer.2.2.0/jquery.jplayer.min.js"></script>
   <!-- <script type="text/jscript" src="http://www.jplayer.org/2.2.0/js/jquery.jplayer.min.js"></script> -->

Jquery:

$(document).ready(function () {
                $("#jpId").jPlayer({
                ready: function () {
                    $(this).jPlayer("setMedia", {
                        mp3: "/HolidayCard/179_short_all-the-family-together_0033.MP3"
                    }).jPlayer("play");
                },
                //swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
                swfPath: "http://www.jplayer.org/2.2.0/js",
                solution: "html,flash",
                supplied: "mp3",
                wmode: "window"


            });

        });

HTML5 div tag:

<div id="jpId" ></div>

Solution

  • This is most likely caused by not having an absolute path to your file. If you view this in visual studio, it most likely knows the relative path to your file and that's why you can view it through VS. Try adding the full path to your .htm file and see if that helps. You can also use Chrome Dev Tools, Firebug or IE Dev Tools to see what error your .htm file is throwing to help you solve the problem. Generally as a rule of thumb, the majority of your testing should be done through a browser as opposed to the VS browser. Also, if this is a web page that is for a live website, I would suggest testing it in the 3 major browsers too (IE, Chrome and Firefox) to be sure of cross browser compatibility.