Videogular : Unable to add videos dynamically

Question

I'm developing an application using Ionic and in that I'm allowing user to upload videos. So for playing videos I have integrated Videogular library.

Controller Code

$scope.videoAPI = null;

   $scope.config = {
       playsInline: false,
       preload: "auto",
       autoHide: false,
       autoHideTime: 3000,
       autoPlay: true,
       sources: [],
       theme: "lib/videogular-themes-default/videogular.css",
       plugins: {
           poster: "http://www.videogular.com/assets/images/videogular.png"
       }
   };

   $scope.onPlayerReady = function(api) {
       console.log('onPlayerReady : : ', api);
       $scope.videoAPI = api;
   }


   $scope.uploadVideo = function() {
       if (!deviceType) {
           $('#fileSelect').val('').click();
       } else {
           console.info('Uploading Video..');
           MediaService.browseVideo().then(function(uploadResponse) {
               console.info('video uploadResponse : : ', uploadResponse);
               var response = JSON.parse(uploadResponse.response);
               var videoUrl = response.url.video[0].location;

               //Here I'm Dyncamically setting the URL of my video
               $scope.config.sources.push({
                   src: $sce.trustAsResourceUrl(videoUrl),
                   type: 'video/mp4'
               });
               console.info('Video Uploaded..');
           }).catch(function(error) {
               console.warn('Error while fetching video ', error);
               $scope.showAlert('Video Upload', error);
           });
       }
   };

While uploading video $scope.config.sources is updating properly. But when I inspect the DOM I don't get the video there..Here is screenshot

So what should I do to make this work?

score 0 · Answer 1 · answered May 07 '16 at 13:08

If your MediaService is running outside of Angular's digest cycle (for example, if that promise comes from jQuery) then maybe you need to do $scope.$apply() to update DOM.

$scope.uploadVideo = function() {
   if (!deviceType) {
       $('#fileSelect').val('').click();
   } else {
       console.info('Uploading Video..');
       MediaService.browseVideo().then(function(uploadResponse) {
           console.info('video uploadResponse : : ', uploadResponse);
           var response = JSON.parse(uploadResponse.response);
           var videoUrl = response.url.video[0].location;

           //Here I'm Dyncamically setting the URL of my video
           $scope.config.sources.push({
               src: $sce.trustAsResourceUrl(videoUrl),
               type: 'video/mp4'
           });
           console.info('Video Uploaded..');

           // Trigger digest cycle
           $scope.$apply();

       }).catch(function(error) {
           console.warn('Error while fetching video ', error);
           $scope.showAlert('Video Upload', error);
       });
   }
};

I'm using `$q` to resolve the promise..and I already tried `$scope.$apply()`it was throwing error `$digest already in progress`. — Tushar, May 08 '16 at 03:28

score 0 · Accepted Answer · answered May 11 '16 at 07:00

Finally solved it..The issue was I was pushing the object to the $scope.config.sources

Before

$scope.config.sources.push({
     src: $sce.trustAsResourceUrl(videoUrl),
     type: 'video/mp4'
 });

After

$scope.config.sources =[{
    src: $sce.trustAsResourceUrl(videoUrl),
    type: 'video/mp4'
}];

I think videogular doesn't deep watch the $scope.config object. So instead of pushing into source object I have to reinitialize the source every time.

Videogular : Unable to add videos dynamically

2 Answers2