在离子框架中使用 Cordova ($cordova Capture) 将视频上传到 Firebase

Question

如何上传我用手机录制的视频。我设法将视频路径上传到 Firebase，但是当我想在我的视图（html 文件）中使用它时，它不起作用。这是我的代码：

.controller("HomeCtrl", function($scope, $firebaseArray, $cordovaCamera, $location, $cordovaCapture){
  var fb = new Firebase("https://myURL.firebaseio.com/videos");
  $scope.videos;
  $scope.record = function(){
      fb = new Firebase("https://myURL.firebaseio.com/videos");
      $scope.videos = $firebaseArray(fb);
      var options = { limit: 1, duration: 15 };
      $cordovaCapture.captureVideo(options).then(
          function(videoData) {
              var i, path, len;
              var pathtogo;
              var pathtogostring;
              for (i = 0, len = videoData.length; i < len; i += 1) {
                  path = videoData[i].fullPath;
                  pathtogo = path.toString();
                  pathtogostring = pathtogo.substr(6);  
                  alert("Path of the video is = " + path.toString());                                      

                  obj = {
                      videoP: path,
                      videosrc: pathtogostring
                  }
                  $scope.videos.$add(obj);
                }
          },
          function(err) {
          }
      );
  }//end record
 })//end controller

我的html文件

  <div ng-repeat="video in videos" class="card">

    <div class="item item-text-wrap">
        {{video.videoP}}
    </div>

    <div class="item item-text-wrap">
        {{video.videosrc}}
    </div>

    <video controls>
        <source src="video.videosrc" type="video/mp4">
    </video>
</div>

Answer 1

我自己没有运行应用程序很难判断，但我确实看到你的 record 功能有问题。

不要在record函数里面初始化$firebaseArray，在controller初始化的时候做：

.controller("HomeCtrl", function($scope, $firebaseArray, $cordovaCamera, $location, $cordovaCapture){
  var fb = new Firebase("https://myURL.firebaseio.com/videos");
  $scope.videos = $firebaseArray(fb);
  $scope.record = function record() {
     // ... your record code here 
  };
})

$firebaseArray与服务器同步，只需要创建一次

关于你的显示问题...

需要将<source>中的src属性改为ng-src，并使用curlys{{ }}进行插值：

<video controls>
    <source ng-src="{{video.videosrc}}" type="video/mp4">
</video>

For more information on HTML attrs vs directives, see this answer.

Answer 2

.controller("HomeCtrl", function($scope, $firebaseArray, $location, $cordovaCapture){
var fb = new Firebase("https://myURL.firebaseio.com/videos");
$scope.videos;
$scope.record = function(){
    fb = new Firebase("https://myURL.firebaseio.com/videos");
  $scope.videos = $firebaseArray(fb);
  var options = { limit: 1, duration: 15 };
  $cordovaCapture.captureVideo(options).then(
      function(videoData) {
          var i, path, len;
          var pathtogo;
          var pathtogostring;
          for (i = 0, len = videoData.length; i < len; i += 1) {
              path = videoData[i].fullPath;
              pathtogo = path.toString();


              obj = {
                    videosrc: pathtogo 
              }
              $scope.videos.$add(obj);
            }
      },
      function(err) {
      }
  );
}//end record
 })//end controlle

在离子框架中使用 Cordova ($cordova Capture) 将视频上传到 Firebase

Uploading video to Firebase uing ngCordova ($cordovaCapture) in ionic framework

angularjs

firebase

angularfire

ionic

ngcordova