Fatal编程技术网
  • javascript/
  • Javascript 使用phonegap预览后如何将视频上载到服务器

Javascript 使用phonegap预览后如何将视频上载到服务器

javascript android jquery cordova

Javascript 使用phonegap预览后如何将视频上载到服务器,javascript,android,jquery,cordova,Javascript,Android,Jquery,Cordova,请允许我就如何上传phonegap android应用程序拍摄的视频寻求帮助。我可以上传捕获的视频，但我希望应用程序的用户在上传之前观看捕获的视频。这就是我的问题所在 我使用的代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

请允许我就如何上传phonegap android应用程序拍摄的视频寻求帮助。我可以上传捕获的视频，但我希望应用程序的用户在上传之前观看捕获的视频。这就是我的问题所在

我使用的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <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 src="js/modernizr-latest.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", init, false);
function init() {


document.querySelector("#takeVideo").addEventListener("touchend",   function() {
    alert("Take video");
    navigator.device.capture.captureVideo(captureSuccess,  captureError, {limit: 1, duration: 10});
}, false);

}

function captureError(e) {
console.log("capture error: "+JSON.stringify(e));
}

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

function uploadFile(s) {

// Get URI of picture to upload
var img = document.getElementById('videoArea');
var mediaFile = img;
alert(mediaFile);
if (!mediaFile || (img.style.display == "none")) {

    alert("Take picture or select picture from library first.");
        return;
    }

    var ft = new FileTransfer(),
    path = mediaFile.substr(mediaFile.lastIndexOf('/')+1),
    name = mediaFile.name;
    var options = new FileUploadOptions();
    options.mimeType = "document";
    options.fileName = name;
    options.chunkedMode = true;
        options.params = params;

    ft.upload(path,
        "http://www.example.com/folder/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 id="takeVideo">Take Video</button><br>
    <b>Status:</b> <span id="camera_status"></span><br>
    <div id="videoArea"></div>

    <button type="submit" onclick="uploadFile();">Submit</button>

</body>
</html>
我希望你能帮助我解决这个挑战。我不知道如何引用视频标记名，也不知道如何从分区的videoArea id提取图像路径。

感谢@Danieboy的回复。我检查了你引用的链接，它没有解释如何上传上传上传前为应用程序用户查看而显示的捕获视频。我的意思是：捕获视频，将其显示在容器（如div）上，然后从div将视频上载到服务器。因此，如何映射div属性以获得我将在文件上载功能中使用的视频完整路径？提前感谢您的帮助。感谢@Danieboy的回复。我检查了你引用的链接，它没有解释如何上传上传上传前为应用程序用户查看而显示的捕获视频。我的意思是：捕获视频，将其显示在容器（如div）上，然后从div将视频上载到服务器。因此，如何映射div属性以获得我将在文件上载功能中使用的视频完整路径？提前感谢你的帮助。