HTML5 Video is not working with AngularJS ng-src tag

AngularJS ng-src doesn't work with HTML5 Video element in this fiddle: http://jsfiddle.net/FsHah/5/

Looking at video element, the src tag is being populated with the correct src uri, but the video doesn't play.

Is this not supported in AngularJS, what is the workaround for this?


Just Create a Filter:

app.filter("trustUrl", ['$sce', function ($sce) {
        return function (recordingUrl) {
            return $sce.trustAsResourceUrl(recordingUrl);
        };
    }]);

In View File:

<audio src="{{Your_URL | trustUrl}}" audioplayer controls></audio>

To play the video I just used the following method have a button called play and in the ng-click of the button you have to write this

 var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = vidURL;
myVideo.load();
myVideo.play();

to play video in ng-repeat use index. hope it helps.


This currently seems like a bug in AngularJS: https://github.com/angular/angular.js/issues/1352

Replacing source with <video ng-src="{{src}}" controls></video> seems to be the only way at the moment to at least load a source into the video. Hopefully someone comes around to either fix this or provide a workaround of some sort.