Question

我正在使用以下代码捕获视频并将其显示在应用上。

[info] Set current project to example-user-app in build file:/home/example-user/example-user-app)

显示捕获的视频后，单击“上传视频”按钮时没有任何反应。视频未上传到服务器。同时，如果我用以下代码替换captureSuccess（s）函数;

<!DOCTYPE html>
<html>
<head>
<title>Capture Video</title>

<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css"/>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/json2.js"></script>
<script type="text/javascript" charset="utf-8">

// Called if something bad happens.
//
function captureError(error) {
    var msg = 'An error occurred during capture: ' + error.code;
    navigator.notification.alert(msg, null, 'Uh oh!');
}

// A button will call this function
//
function captureVideo() {
    // Launch device video recording application,
    // allowing user to capture only 1 video clips with 10mins duration
    navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 1, duration: 10});
}
// Called when capture operation is finished
// to display the captured video
function captureSuccess(s) {
console.log("Success");
console.dir(s[0]);
var v = "<video controls='controls'>";
v += "<source src='" + s[0].fullPath + "' type='video/mp4'>";
v += "</video>";
document.querySelector("#videoArea").innerHTML = v;
}
// This function is to upload the captured video when the user
// clicks upload video button
function uploadFile(mediaFile) {

var ft = new FileTransfer(),
    path = mediaFile.fullPath,
    name = mediaFile.name;
var options = new FileUploadOptions();
options.mimeType = "documents";
options.fileName = name;
options.chunkedMode = true;

ft.upload(path,
    "http://www.example.com/upload.php",
    function(result) {
        alert('Upload success: ' + result.responseCode);
        alert(result.bytesSent + ' bytes sent');
    },
    function(error) {
        alert('Error uploading file ' + path + ': ' + error.code);
    },
    options);
}
</script>
</head>
<body>
    <button onclick="captureVideo();">Capture Video</button> <br><br>
    <div id="videoArea"></div><br><br>
    <button id="uploadvid" onclick="uploadFile();">Upload Video</button>

</body>
</html>

虽然没有预览，但已捕获的视频已成功上传到服务器。

请有人告诉我我做错了什么。我希望用户在点击“上传视频”按钮之前先查看捕获的视频。感谢。

Answer 1

您的代码存在的问题是onclick="uploadFile();"不接受任何参数，但您的函数uploadFile(mediaFile)期待参数。

<button id="uploadvid" onclick="uploadFile();">Upload Video</button>

我对解决方案的建议是，将按钮元素创建为

<button id="uploadvid" >Upload Video</button>

将您的函数captureSuccess写为

function captureSuccess(s) {
  console.log("Success");
  console.dir(s[0]);
  var v = "<video controls='controls'>";
  v += "<source src='" + s[0].fullPath + "' type='video/mp4'>";
  v += "</video>";
  document.querySelector("#videoArea").innerHTML = v;

  //here you write logic when upload button is clicked
  $("#uploadvid").on("click",function(){
     uploadFile(s[0]);
  });
}

如何通过phonegap android app上传捕获和显示的视频

1 个答案: