视频图像：无法动态添加视频

Question

我正在使用Ionic开发应用程序，并且我允许用户上传视频。因此，为了播放视频，我整合了Videogular库。

控制器代码

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

在上传视频$scope.config.sources正确更新。但是，当我检查DOM我不明白的视频there..Here是截图

所以，我应该怎么做才能使这项工作？

Answer 1

终于解决了it..The问题是我推的对象到$scope.config.sources

以前

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

后

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

我瘦k视频不deep watch$scope.config对象。因此，不必推入source对象，我必须每次重新初始化source。

Answer 2

如果您的MediaService运行在Angular的摘要循环之外（例如，如果该承诺来自jQuery），那么您可能需要执行$ scope。$ apply（）来更新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); 
     }); 
    } 
};