2

我正在开发一个应用程序，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 时，我没有在那里看到视频。这是截图

在此处输入图像描述

那么我应该怎么做才能完成这项工作呢？

4

2 回答 2

0

如果您的 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);
       });
   }
};
于 2016-05-07T13:08:38.140 回答
0

终于解决了..问题是我将对象推到$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我认为videogular不是$scope.config对象。因此，我不必每次source都重新初始化对象，而不是推入对象。source

于 2016-05-11T07:00:22.493 回答