Search code examples
jquery.netjplayer

ASP.Net Update Jplayer


I'm primarily an asp.net guy. I do a lot of back-end development, and right now my javascript is a little shaky (I'm working on it) This new application I'm working is using jplayer. So far everything is working fine. What I'm trying to do, though, is update the source audio for jplayer with information from the database. This is where I'm getting stuck.

So far I retrieve the data from the database, and I pass it to a hidden control. What I want to do is get the value from the hidden control and pass that to the jplayer script which holds the source audio link. I'm not sure how to proceed from here. My initial thought:

<script type="text/javascript">
var audioLink = $('hiddenValue').value
//Code to pass audioLink variable to jplayer???
</script>

Any thoughts? Thanks!


Solution

  • Ok. I've quickly checked their API for jPlayer initialization.

    <script type="text/javascript">
    $(document).ready(function(){
    $("#jquery_jplayer_1").jPlayer({
    ready: function () {
    $(this).jPlayer("setMedia", {
    m4a: "/media/mysound.mp4",
    oga: "/media/mysound.ogg"
    });
    },
    swfPath: "/js",
    supplied: "m4a, oga"
    });
    });
    </script>
    

    If you need to pass parameter such as m4a from hidden control. document.ready event assures that DOM is completely loaded into browser and good to retrieve the values from hidden fields and rest depends on plugin API.

    <script type="text/javascript">
    $(document).ready(function(){
    
    //retrieve from hidden field
    var hdn_m4a = $('#hiddenfieldid').val();
    
    $("#jquery_jplayer_1").jPlayer({
    ready: function () {
    $(this).jPlayer("setMedia", {
    m4a:  hdn_m4a, //assign the variable here
    oga: "/media/mysound.ogg"
    });
    },
    swfPath: "/js",
    supplied: "m4a, oga"
    });
    });
    </script>