Angularjs. How to get a global jquery object and other (jQuery plugin / Angularjs things!) ?

Question

I want to use http://mediaelementjs.com/ to play multiple youtube video in my app. So i have created a directive who load mediaelementjs :

Directives

.directive('mediaelement', function() {
    return {
        link: function(scope, element, attrs) {
            $(element).mediaelementplayer();
        }
    }
})

and i have my player like that :

Player

<video id="player" controls width="374px" height="301px" type="video/youtube" src="{{currentMusic}}" youtube>

Because it's a youtube video medialementjs use flash.

First Problem

currentMusic is initialized only later and when i change currentMusic the DOM is correctly modify but mediaelementjs don't change the source and when i click play nothing play because the source on the flash object is still {{currentMusic}} (not binded)

but if i put directly a youtube source in video src everything is ok.

and if i put a value in currentMusic when my app load and then i wait 2 sec to create mediaelementjs object everything is ok too !

Why ?

Second Problem

If i delete my first mediaelementjs object after a video have been play then i change currentMusic and then i create a new medialementjs object the source is correctly change.

so i have to use setSrc()

and so i would like to change source of the video when i click on a link in an other part of my app. but how can i get my mediaelement object ?

So how make a list of youtube video play with angularjs and mediaelementjs ?

i really hope i'm clear... i spend two days trying to undestand thats happening and make things work but i fail...

Source : How do I get mediaelement.js player state (paused, volume, etc.)?

http://johndyer.name/html5-video-wrapper-for-youtube-and-vimeo-api-mediaelement-js/

media player object from directive

Answer 1

put inside $observe your directive:

attrs.$observe('src', function(src) {
      $(element).mediaelementplayer();
 });

so you will init your plugin each time after SRC is changed

second issue has different solutions, for example using scope/service:

scope.mediaObject = $(element).mediaelementplayer();

UPD:

I've read docs for MediaElementPlayer, so should be pretty simple:

attrs.$observe('src', function(src) {
    $(element).mediaelementplayer().setSrc(src);
});