Question

controller.js
var app = angular.module('startervideo', ['ionic','ngCordova'])

 app.controller('VideoCtrl', function($scope,$cordovaCapture) {
     $scope.data = {
       videoPath: ""
};
     $scope.captureVideo = $scope.captureVideo = function() {
       var options = {duration: 15 };
 
   $cordovaCapture.captureVideo(options).then(
    function(videoData) {
      // Success! Video data is here
      $scope.data.videoPath = "file:/" + videoData[0].fullPath;
      console.log(videoData);
      }, function(err) {
      // An error occurred. Show a message to the user
      console.log(err);
}); 
}
});


app.js
var app = angular.module('starter', ['ionic','ngCordova','startervideo'])
app.directive("cordovaVideo", function () {
         return {
          restrict: 'AEC',
           scope: {src: '='},
       link: function(scope, element, attrs) {
        scope.$watch('src', function(newVal, oldVal) {
               if (scope.src != "") {
                 // Create a div object
                 var div = document.createElement('div');
                 div.innerHTML = "<video id=\"myCordovaVideo\"controls>"+
                 "<source src=\"" + scope.src + "\" type=\"video/quicktime\">"+ "</video>";
                                   // Delete previous video if exists
                 var previousDiv = document.getElementById('myCordovaVideo');
                 if (previousDiv)
                   previousDiv.remove();
                 // Append new <video> tag into the DOM
                 element.append(div);
               }
      }); }
} });

 #myCordovaVideo {
         background: red;
         width: 100%;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link rel="manifest" href="manifest.json">

    

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controller.js"></script>
  </head>
  
   <body ng-app="starter" ng-controller="VideoCtrl">
     <ion-pane>
     
       <ion-header-bar class="bar-stable">
         <h1 class="title">VideoPro</h1>
       </ion-header-bar>

       <ion-content>
         <button class="button button-calm button-full"
         ng-click="captureVideo()">Capture Video</button>
         <cordova-video src="data.videoPath"></cordova-video>
       </ion-content>

     </ion-pane>
</body>

</html>

大家好我在ionic1框架中的新手一直在尝试开发一个应用程序，可以捕获视频在UI上显示它们并最终存储在远程服务器中，到目前为止，我所拥有的代码可以捕获视频，但它不会显示它在UI上。我关注的例子来自离子食谱我急需帮助这里是我的代码

Answer 1

我创建了一个类似的Ionic应用程序，用于捕获视频并将其上传到远程服务器。你可能会发现它很有用 https://github.com/aliasav/ionic-video

离子视频捕获和显示

1 个答案: