jwplayer event with jQuery support?

Question

I am trying to get a jwplayer event to utilize jQuery API so I can pass jQuery effects to external divs from jwplayer events.

I'm trying to get a div to fade out to 100% transparency when the player starts playing, on the onPlay event, like this:

jwplayer('div-player').onPlay(
        function(event) {
            document.getElementById('h1_title').fadeOut('slow', function(){
                // animation complete
            });
        }
    );

and then, when the video is paused or ends, I want the div to fade back in, like so:

    jwplayer("div-player").onPause(
        function(event) {
            document.getElementById('h1_title').fadeIn('slow', function(){
                //animation complete
            });
        }
    );

The jwplayer function is outside the (document).ready(function) Qquery function, but I thought I could reference the jQuery library with namespace dot-syntax, like so:

jwplayer('div-player').onPlay(
        function(event) {
            document.getElementById('h1_title').jQuery.fadeOut('slow', function(){
                // animation complete
            });
        }
    );

however, this does not seem to be the case.

I'm open to any workable solution, either putting the jwplayer function inside the document ready function (which I've fumbled with and cannot figure out) or to call jQuery a second time inside the jwplayer function - or write whatever function necessary - I just don't know how. There's amazingly no references that I can find that does this.

I also tried jwplayer events from within the initial jwplayer call that includes the video url, dimensions, etc (the above are external, additional calls) and that didn't work either.

Any help is appreciated.

Jon Mitten Jon Mitten · Accepted Answer · 2012-09-13T19:55:31

The solution is a syntactical one. Here's my example of the code I fixed myself, which works as desired:

    jwplayer('div-player').onPlay(
        function(event) {

            $('.title').fadeOut('slow', function(){
                // animation complete

            });
        }
    );
    jwplayer("div-player").onPause(
        function(event) {

            $('.title').fadeIn('slow', function(){
                //animation complete

            });
        }
    );

I initially left off the dollar-signs ($), hence my confusion.

jwplayer event with jQuery support?

1 Answers