如何通過phonegap上傳捕獲並顯示的視頻android應用

我正在使用下面的代碼捕獲視頻並將其顯示在應用上。如何通過phonegap上傳捕獲並顯示的視頻android應用

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

顯示捕獲的視頻後，單擊「上傳視頻」按鈕時不會發生任何事情。視頻未上傳到服務器。同時，如果我用以下代碼替換captureSuccess（s）函數;

function captureSuccess(mediaFiles) { 
    var i, len; 
    for (i = 0, len = mediaFiles.length; i < len; i += 1) { 
     uploadFile(mediaFiles[i]); 
    } 
}

雖然沒有預覽，但捕獲的視頻已成功上傳到服務器。

請有人能告訴我我做錯了什麼。我希望用戶在點擊「上傳視頻」按鈕之前先查看捕獲的視頻。謝謝。

來源

2016-10-01 Aika

您的代碼的問題是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]); 
    }); 
}

來源

2016-10-01 16:31:14

感謝@Kiran您的回覆。自從我發佈此問題並剛剛返回後，我離開了將近一天。我會測試你給出的建議並回復。再次感謝。 – Aika

我觀察到您添加的代碼位於captureSuccess（s）函數內部。因此，我不能通過單擊「上傳視頻」按鈕來訪問您添加的代碼，因爲它不會調用「CaptureSuccess（s）」函數。如果我必須在「captureSuccess（s）函數我不知道s [0]是否仍然可用於.onclick函數捕獲。 – Aika

@Aika點擊事件被綁定在捕獲成功函數中。所以當你點擊上傳視頻按鈕時它必須工作。請嘗試代碼。如果它不工作通知我。我會幫你出 –

如何通過phonegap上傳捕獲並顯示的視頻android應用

回答

相關問題