視頻圖像：無法動態添加視頻

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