在离子框架中使用 ngCordova ($cordovaCapture) 将视频上传到 Firebase [英] Uploading video to Firebase uing ngCordova ($cordovaCapture) in ionic framework

问题描述

如何上传我用手机录制的视频.我设法将视频路径上传到 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 选项 = { 限制:1，持续时间:15 };$cordovaCapture.captureVideo(options).then(功能(视频数据){var i, 路径, len;var pathtogo;var pathtogostring;for (i = 0, len = videoData.length; i 

我的 html 文件

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

<视频控制><source src="video.videosrc" type="video/mp4"></视频>

解决方案

如果不亲自运行应用程序很难判断，但我确实发现您的 record 函数存在问题.

不要在record函数内部初始化$firebaseArray，在控制器初始化时进行:

.controller("HomeCtrl", function($scope, $firebaseArray, $cordovaCamera, $location, $cordovaCapture){var fb = new Firebase("https://myURL.firebaseio.com/videos");$scope.videos = $firebaseArray(fb);$scope.record = 函数记录(){//... 你的记录代码在这里};})

$firebaseArray 与服务器同步，因此只需创建一次.

至于您的显示问题...

您需要将中的src属性改为ng-src，并使用curlys{{}} 插入:

<视频控制><source ng-src="{{video.videosrc}}" type="video/mp4"></视频>

对于有关 HTML 属性与指令的更多信息，请参阅此答案.

How to upload video that I record using my mobile. I manage to upload the video path to Firebase but when I want to use it in my view (html file), it does not work. Here is my code:

.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 

My html file

  <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>

解决方案

It's hard to tell without running the app myself, but I do see an issue with your record function.

Don't initialize the $firebaseArray inside of the record function, do it when the controller initializes:

.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 
  };
})

The $firebaseArray is in sync with the server, so it only needs to be created once.

As for your display issue...

You need to change the src attribute in <source> to ng-src, and use curlys {{ }} to interpolate:

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

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

这篇关于在离子框架中使用 ngCordova ($cordovaCapture) 将视频上传到 Firebase的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！