Video: Kann Videos nicht dynamisch hinzufügen

Question

Ich entwickle eine Anwendung mit Ionic und darin erlaube ich dem Benutzer Videos hochladen. Also zum Abspielen von Videos habe ich Videogular Bibliothek integriert.

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

Beim Hochladen Video $scope.config.sources aktualisiert richtig. Aber wenn ich das DOM inspizieren bekomme ich das Video nicht there..Here Screenshot ist

Also, was soll ich tun, um diese Arbeit zu machen?

Answer 1

Schließlich gelöst it..The Problem war ich zum $scope.config.sources

Vor

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

Nach

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

ich dünn, um das Objekt schob k videogular nicht deep watch das $scope.config Objekt. Anstatt also in source Objekt zu schieben, muss ich das source jedes Mal neu initialisieren.

Answer 2

Wenn Ihr MediaService außerhalb des Digest-Zyklus von Angular ausgeführt wird (z. B. wenn dieses Versprechen von jQuery stammt), müssen Sie möglicherweise $ scope. $ Apply() ausführen, um DOM zu aktualisieren.

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