如何在 Phonegap 中显示捕获的视频？答案

【问题标题】：How to show capture video in Phonegap?如何在 Phonegap 中显示捕获的视频？
【发布时间】：2015-06-05 12:59:06
【问题描述】：

我正在使用 phoengap 捕获视频插件我用过这段代码

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

它工作正常..但我想要

如何在触摸选择上显示我的视频图像或播放视频？

我确实用过这个

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

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

【问题讨论】：

标签： jquery cordova phonegap-plugins video-capture

【解决方案1】：

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

【讨论】：

当然 - 我想 :) 我也写过博客 - raymondcamden.com/2015/06/05/…
@RaymondCamden 我收到类似“成功回调Id 错误：Capture839271896：TypeError：console.dir 不是函数”的错误
console.dir 不是函数？奇怪 - 你在什么平台上使用它？您可以将其替换为 console.log。

【解决方案2】：

因为是视频，我猜你应该使用标签video而不是img。我现在无法验证这一点

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

【讨论】：