Ng-src not updated in video tag


#1

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:


#2

I found the solution:

set Strict Contextual Escaping to allow access to my server.

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

#3

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:


#4

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.


#5

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>

#6

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?


html5 Video tag style messed in Ionic CSS
#8

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


#9

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>

#10

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

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


#11


#13

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


#14

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


#15

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


#16

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:


#17

i used the html video tag for that instead of iframe


#18

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?


#19

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.


#20

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!!!


#21

thanks! it works like a charm :wink:


#23

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

});