HTML5 Video is not working with AngularJS ng-src tag

Question

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 popu

Answer 1

I think what's happening is Angular fills in the src attributes after the and elements have been added to the page, so the browser sees the elements with broken URLs. I worked around it using ng-if:

        <video muted ng-if="foo" loop autoplay>
            <source ng-src="{{foo.media.mp4.url}}">
            <source ng-src="{{foo.media.webm.url}}" type="video/webm">
            <img ng-src="{{foo.media.gif.url}}">
        </video>

This makes the element tied to the existence of foo, which is a scope variable being populated via AJAX call.

Answer 2

workaround

in controller

$scope.mp3 = "http://download.jw.org/audio.mp3"

$scope.$watch('mp3', function() {
       $("audio").attr("src",$scope.mp3)
   });

html:

<audio id="mejs" type="audio/mp3" controls="controls"></audio>

Answer 3

Just use vanilla js (regular javascript) to make this work. If you are listening to events like onended you might want to reconsider using $scope.$apply().

My example:

document.getElementById('video').src = $scope.videos[$scope.videoindex];

Answer 4

Remove source tag from video tag and try this..

<video controls preload=auto ng-src="{{videoURL| trustUrl}}" poster="{{thumbnailUrl}}"></video>

and in your angular app create a filter like this

 app.filter("trustUrl", function($sce) {
            return function(Url) {
                console.log(Url);
                return $sce.trustAsResourceUrl(Url);
            };
        });