如何在Phonegap中显示捕捉视频？

我使用phoengap捕获视频插件我已经使用这个代码如何在Phonegap中显示捕捉视频？

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

<script type="text/javascript" charset="utf-8" src="cordova.js"> </script> 
<script type="text/javascript" charset="utf-8" src="json2.js"></script> 
<script type="text/javascript" charset="utf-8"> 

// Called when capture operation is finished 
// 
function captureSuccess(mediaFiles) { 
    var i, len; 
    for (i = 0, len = mediaFiles.length; i < len; i += 1) { 
     uploadFile(mediaFiles[i]); 
    } 
} 

// 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 up to 2 video clips 
    navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 2}); 
} 

// Upload files to server 
function uploadFile(mediaFile) { 
    var ft = new FileTransfer(), 
     path = mediaFile.fullPath, 
     name = mediaFile.name; 

    ft.upload(path, 
     "http://my.domain.com/upload.php", 
     function(result) { 
      console.log('Upload success: ' + result.responseCode); 
      console.log(result.bytesSent + ' bytes sent'); 
     }, 
     function(error) { 
      console.log('Error uploading file ' + path + ': ' + error.code); 
     }, 
     { fileName: name }); 
} 

</script> 
</head> 
<body> 
    <button onclick="captureVideo();">Capture Video</button> <br> 
</body> 
</html>

它工作正常..但我想

how to show my video image or play the video on touch select?

我没有使用这个

path = mediaFile.fullPath 
    $("div").html("<img src="+path+">");

不显示视频图像。你可以帮我吗？

来源

2015-06-05 Angu

@DavidC是真正的接近，你只需要知道使用什么属性MediaResult OB的，FULLPATH。这是一个完整的例子。

document.addEventListener("deviceready", init, false); 
function init() { 


    document.querySelector("#takeVideo").addEventListener("touchend", function() { 
     console.log("Take video"); 
     navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 1}); 
    }, 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>"; 
    console.log(v); 
    document.querySelector("#videoArea").innerHTML = v; 
}

来源

2015-06-05 14:52:51

谢谢@Raymond – Angu

是我的问题好吗？ – Angu

当然 - 我想:)我也在博客 - http://www.raymondcamden.com/2015/06/05/cordova-sample-capture-and-display-video –

因为它是一个视频，我想你应该使用标记视频，而不是img。我无法验证这马上

$("div").html(' <video controls="controls"> 
     <source src="'+path+'" type="video/mp4" /> 
    </video>');

来源

2015-06-05 14:17:09 DavidC

thanks @DavidC。 – Angu

如何在Phonegap中显示捕捉视频？

回答

相关问题