CODEWITHSUNDEEP
ajaxhtmlangularjshtml5-video
qais
qais

Reputation: 1888

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?

Upvotes: 21

Views: 50919

Answers (10)

nesimtunc
nesimtunc

Reputation: 869

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

Upvotes: 2

dk123
dk123

Reputation: 19690

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.

Upvotes: 8

saurabh yadav
saurabh yadav

Reputation: 153

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

Upvotes: 5

Se&#225;n Hayes
Se&#225;n Hayes

Reputation: 4360

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.

Upvotes: 2

Sdd Sdei
Sdd Sdei

Reputation: 793

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>

Upvotes: 57

Muhammad Reda
Muhammad Reda

Reputation: 27023

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.

Upvotes: 1

Marc
Marc

Reputation: 48

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

Upvotes: 0

kavinhuh
kavinhuh

Reputation: 739

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.

Upvotes: 8

Soubriquet
Soubriquet

Reputation: 3330

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.

Upvotes: 4

Dario
Dario

Reputation: 29

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>

Upvotes: 2

Related Questions