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

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.

Answer 2

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>

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

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.