视频:无法动态添加视频

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'
}];

我认为视频并不是deep watch $scope.config对象。因此，我必须每次都重新初始化source对象，而不是插入到source对象中。

Answer 2

如果您的MediaService运行在角的摘要周期之外(例如，如果这个承诺来自于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);
       });
   }
};