Ng-src not updated in video tag

Hi all,

I have a project that have a list view, showing video on each list item. All data is retrieved from remote json file.

My code is this

<video ng-src="http://www.jeembastudio.com/gtp/video/{{item.source}}" controls width="250"></video>

but all video not show up.
It only works when I’m using hard-coded link. Like this

<video ng-src="http://www.jeembastudio.com/gtp/video/video1.mp4" controls width="250"></video>

and there is no problem with <img/>, only <video> tag cause the unwanted result.

Any hint? Thanks :smile:

I found the solution:

set Strict Contextual Escaping to allow access to my server.

$sceDelegateProvider.resourceUrlWhitelist(
    [
     'self',
     'http://jeembastudio.com/**'
    ]
   );
1 Like

Actually this is not working on android, since android has problem with <video> tag. But ios has no problem with this.

Please share if you know the workaround :slight_smile:

hey there,

i built a directive for that.
The only way it works for me. ng-src does not work for media-tags i think.

So my directive has one attribute where the src is stored.
After that it fills the ordinare src attribute of media-tag with that url.

<video .... dynamic-src dynamic-src-path="{{path}}">

My directive fills element.src with the value of dynamic-src-path.

Greetz, bengtler.

1 Like

Hi bengtler,

can you explain or share the code?

I was just get into angular and custom ‘directive’ stuff. Based on your explanation, I made this but no luck.

in my controller:

.directive('myVideo', function(){
  return function(scope, element, attrs){
    var dir = {};
    dir.restrict = 'A';
    attrs.src = scope.item.video;
  }
})

and my html (inside ng-repeat) :

<video src="" controls width="250" my-video></video>

In a template

<video width="320" height="240" controls>
     <source src="" dynamic-url dynamic-url-src="{{video_url}}">
 </video>

directive:

app.directive('dynamicUrl', function () {
    return {
        restrict: 'A',
        link: function postLink(scope, element, attr) {
            element.attr('src', attr.dynamicUrlSrc);
        }
    };
});

That worked for me.
Are your files in correct format/coding?

4 Likes

Great solution, i had the same issue with an audio tag and it solved it :smile:
thanks !

Hi,

I am using the following code. But its not working

in controller

    .controller('videoGalleryController', function ($scope, $stateParams, $http, $sce) {

        var id = $stateParams.id;

        $http.get(localStorage.getItem("targetLink") + "getVideo?Id=" + id)
                .success(function (data, status, headers, config) {
                    $scope.videogallery = data;
                })
                .error(function (data, status, headers, config) {
                })
    })

in html page

   <ion-item ng-repeat="videogal in videogallery" overflow-scroll="true">      
       <video ng-src="{{videogal.videoPath}}" class="centerme" controls="controls" width="100%" height="auto"></video>
    </ion-item>

there is no ng-src for video and audio tags.

use my solution with the special directive, which adds the source afterwards

This worked for me as well with an iframe tag thank you. had to make minor adjustments.

Hi Bengt, I’ve just tried it on my app, but it does not workj for me. I’ve just C&P your code (changing your video_url parameter with mine, obviously). Is there anything else I have to do?

thank you very much in advance.

Stefano

ps: no error shown in the console

in my case the video was in an invalid/unsupported format (audio or video format or unsupported codec). --> you could try to download a youtube video on your mobile device and test you app with that.

I had some format issues --> the video player is shown, but does not plays the video

My problem occurs before the compatibility check as no video is loaded. I tried that both in the ionic serve and on the device.

I’m not too confident with AngularJS custom directives: I created directives.js file and linked it in the index.html. Is there anything else to do?

That’s my code:

Directive:

angular.module('starter.directives', [])


.directive('dynamicUrl', [function () {
return {
    restrict: 'A',
    link: function postLink(scope, element, attr) {
        element.attr('src', attr.dynamicUrlSrc);
    }
}
}]);

`

and that’s the template:

<div class="card">
    <iframe src="" dynamic-url dynamic-url-src="{{data.urlVideo1}}" frameborder="0" width="560" height="315" allowfullscreen></iframe>
</div>

data.urlVIdeo1 contains a valid url.

Since this is an app for seeing and uploading videos, this problem is driving me nuts!! :frowning:

i used the html video tag for that instead of iframe

Already tried that: the video tag is correctly shown, but no video is loaded in it…

I was thinking: is there any particular Angular resource / library I have to include to the project to make this code work?

did you see the correct video source in the sourcecode?

there should be everything in the ionic.bundle.js

You can try to use $sce-service to mark your resource as a trusted one.

THAT WAS THE KEY!!! :slight_smile:

The $sceDelegateProvider. In the end, it worked even without the postLink in my Android Phone.

Thank you very much Bengt!!!
Problem solved!!!

thanks! it works like a charm :wink:

Hello bengtler i use you solution but it is not working for me please help((((

it is your code in my controller.js

angular
.module(‘comicsApp’)
.controller(‘ComicsController’, function(Comics, $scope, $ionicLoading) {
var _this = this;

    $scope.$on('$ionicView.enter', function(){
        $ionicLoading.show();

        Comics.getComics().then(function(response){
            _this.comics = response.data;
        }).catch(function(response){
            //request was not successful
            //handle the error
        }).finally(function(){
            $ionicLoading.hide();
        });
    });

})

.controller('ComicDetailController', function(Comics, $stateParams, $scope, $ionicLoading) {
    var _this = this;
    
    $scope.$on('$ionicView.enter', function(){
        $ionicLoading.show();

        Comics.getComic($stateParams.comicId).then(function(response){
            _this.comic = response.data;
        }).catch(function(response){
            //request was not successful
            //handle the error
        }).finally(function(){
            $ionicLoading.hide();
        });
    });
});

add.directive('dynamicUrl', function () {
return {
    restrict: 'A',
    link: function postLink(scope, element, attr) {
        element.attr('src', attr.dynamicUrlSrc);
    }
};

});