ビデオ：動的にビデオを追加できません

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 =[{ 
    src: $sce.trustAsResourceUrl(videoUrl), 
    type: 'video/mp4' 
}]; 

後

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

前$scope.config.sources

にオブジェクトをプッシュした解決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); 
     }); 
    } 
};