Videogular：无法动态添加视频

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 时，我看不到视频。这是屏幕截图

那么我应该怎么做才能使这项工作正常进行？

Answer 1

如果您的媒体服务运行在 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);
       });
   }
};

Answer 2

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

之前

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

之后

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

我认为 videogular 没有 deep watch $scope.config 对象。因此，我不必每次都重新初始化 source 对象，而不是推入 source 对象。

Videogular：无法动态添加视频

Videogular : Unable to add videos dynamically

javascript

video

angularjs

videogular

ionic-framework