视频:无法动态添加视频

时间:2016-05-04 06:35:04

标签: javascript angularjs video ionic-framework 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库。

控制器代码

module Base
    def Hello
        puts "Hello"
    end
end

class Top

  include Base

  def Hello
    puts "hello from top"
  end

  def Hi
    if p == 1
        Hello
    else
        Base::Hello
    end
  end
end

上传视频时Error: undefined method `Hello' for Base:Module 正在正确更新。但是当我检查DOM时,我没有得到视频。这是截图

bandwidth-throttle/token-bucket

那么我应该怎样做才能使这项工作?

2 个答案:

答案 0 :(得分: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);
       });
   }
};

答案 1 :(得分: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 $scope.config对象。因此,我不必每次都进入source对象,而是必须重新初始化source