MediaElement.js with Angularjs

Question

I have this simple audio for mediaElement.js which works with normal HTML/Js but does not work with angularjs. The Media player is shown just fine but clicking play button does not work.

<div class="col-md-6">
    <div class="alert alert" ng-repeat="media in medias">
        <h3>{{media.title}}</h3>
        <p>{{media.summary}}</p>
        <audio id="{{media.filename}}" src="http://danosongs.com/music/danosongs.com-orb-of-envisage.mp3" type="audio/mp3" controls="controls">     
    </div>

</div>

<script>
    // using jQuery
    $('video,audio').mediaelementplayer(/* Options */);
</script>

![enter image description here][1]

nope. it involves two files and i don't know how to interlink them on fiddle — Stefano Mtangoo, Mar 24 '15 at 10:48
One reason might be the initialising media player before the angular is bootstrapped which triggers after the static dom content is loaded. Just to test this your script function load with some time delay. FYI, this is only to identify the issue. or fire this "$('video,audio').mediaelementplayer(/* Options */); " from console. with this commented in code(just a safe measure) — Biswanath, Mar 24 '15 at 10:54
you are right. I put delay of 3 secs and it works. Does angular fire any event after ng-repeat is done? — Stefano Mtangoo, Mar 24 '15 at 10:57

score 0 · Accepted Answer · edited May 23 '17 at 11:56

I found the problem thanks to @Biswanath. I was loading Mediaelement before Angular finished loading the elements. So I had to call it when all elements are loaded. Googling I found the solution here and here is my HTML codes

<div class="alert alert" ng-repeat="media in medias" ng-init="$last ? loadMediaElement() : false">

Then in my controller scope, I register Javascript function which bootstraps MediaElementjs, since ng-repeat is done

    $scope.loadMediaElement = function()
    {
        $('video,audio').mediaelementplayer(/* Options */);
    };

MediaElement.js with Angularjs

1 Answers1