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 populated with the correct src uri, but the video doesn't play.

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

Check this out http://stackoverflow.com/questions/19372300/angular-js-dynamic-ng-src-not-working-in-1-2-0-rc-2/21307518 — Dmitri Algazin, Jan 23 '14 at 12:01

score 55 · Accepted Answer · answered Jul 09 '15 at 09:35

55

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>

answered Jul 09 '15 at 09:35

Sdd Sdei

773
6
10

1

great answer! good to note that the code for a video is actually `` – Benjamin Conant Jan 26 '16 at 05:44
@BenjaminConant Give this guy a medal! You just saved me my sanity sir!! And yes props to the original trusted filter. Great elegant solution. – Mackenzie Browne Mar 06 '16 at 17:24
1

Can you elaborate please? In this example, where/home do you set the actual source? Your example shows using an audio object, but the question was asking about a video object. Is it the same method for both? Also, what is a filter? Thanks. – JackKalish Apr 13 '16 at 18:15
2

@sdd sdei, any chance you can explain what is happening here? – Paul Fitzgerald May 31 '16 at 17:18
1

works like a charm, but please could you provide an explanation? – Tanuj Dhaundiyal Jul 21 '16 at 11:36

score 8 · Answer 2 · edited Oct 23 '18 at 00:39

8

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.

edited Oct 23 '18 at 00:39

georgeawg

48,608
13
72
95

answered May 22 '13 at 13:52

dk123

18,684
20
70
77

it took my whole day but this solution does the trick.. thanks a lot – Kailash Jan 12 '17 at 11:40

kavinhuh · Answer 3 · 2015-02-27T15:00:08.907

8

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.

edited Feb 27 '15 at 15:00

answered Jun 28 '14 at 09:12

kavinhuh

739
1
9
30

1

Thanks you, this worked for me! In my situation, I wanted the video to play automatically, so I did it this way using a JS timeout. – JackKalish Apr 13 '16 at 18:18

saurabh yadav · Answer 4 · 2017-08-29T07:38:11.180

5

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);
            };
        });

edited Aug 29 '17 at 07:38

answered Aug 29 '17 at 07:22

saurabh yadav

153
1
7

note: poster will be an error "Not Found", should be ng-attr-poster – Nguyễn Xuân Hoàng Oct 31 '17 at 03:41

score 4 · Answer 5 · answered Oct 10 '14 at 23:08

My response is a few years late, but this is for anyone who is still looking for a solution. I had the same issue. I remembered that Youtube displays their embedded videos using a different tag - iframe. I applied the properties I wanted and it worked.

<iframe width="560" height="300" ng-src="{{ video }}" frameborder="0" allowfullscreen controls></iframe>

For anyone new to AngularJS, the {{ video }} is a $scope.video variable in the control for this page that has the path to the video.

score 2 · Answer 6 · answered Jul 23 '14 at 22:43

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>

answered Jul 23 '14 at 22:43

Dario

29
2

1

angular equivalent, without jQuery dependency: `angular.element(document.getElementById('audio_element_id')).attr('src', $scope.mp3)` – JoshuaDavid Feb 08 '15 at 03:44

score 2 · Answer 7 · edited Oct 23 '18 at 00:42

This is a default security precaution in AngularJS. Please see the details: https://docs.angularjs.org/api/ng/service/$sce

To disable the 'Strict Contextual Escaping' compeletly you can define this in your app.js file

angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
      // Completely disable SCE.  For demonstration purposes only!
      // Do not use in new projects.
      $sceProvider.enabled(false);
    });

However they don't recommend. But you may use for a spesific controller like this:

var myAppControllers = angular.module('myAppControllers', []); ScorpAppControllers.controller('HomeCtrl', ['$scope', 'Home',    function ($scope, Home) {
$scope.Home = Home.query(); }]).config(function($sceProvider) {
$sceProvider.enabled(false); });

score 2 · Answer 8 · answered Jun 29 '16 at 18:18

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.

Put the `ngIf` in each `source` element and check if the `ngSrc` value is indeed set: `` This should work as well, and you don't need to maintain an additional `foo` variable. — user1438038, Jul 25 '22 at 14:03

score 1 · Answer 9 · answered May 04 '15 at 07:26

You can use ng-media module.

angular.module('app', ['media'])
    .controller('mainCtrl', function($scope) {
        
        $scope.videoSources = [];
        
        $scope.loadVideos = function() {
            $scope.videoSources.push('http://www.w3schools.com/html/mov_bbb.mp4');
            $scope.videoSources.push('http://www.w3schools.com/html/mov_bbb.webm');
        };
    });

<div ng-app='app'>
  <div ng-controller='mainCtrl'>        
    <video html5-video='{{ videoSources }}'
        autoplay='true' controls='true'>
    </video>
    <br>
    <a href="#" ng-click='loadVideos()'>Load videos</a>
  </div>
</div>

<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="http://caitp.github.io/ng-media/ng-media.js"></script>

Plunker.

score 0 · Answer 10 · answered Apr 24 '15 at 13:17

0

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];

answered Apr 24 '15 at 13:17

Marc

48
1
8

HTML5 Video is not working with AngularJS ng-src tag

10 Answers10

Linked