使用Cordova在iOS中创建和捕获视频

Question

I want to capture a video. After that, i want to play the video after clicking a button. I'm working with cordova for a iOS and Android app. I'm working with the cordova-plugin-media-capture and cordova-plugin-streaming-media plugins.

Caputring the video works finde. But if i'm clicking on the "Play Video" button, i get an error in console:

ReferenceError: Can't find variable: playVideo

Whats wrong? Here is my function:

//cordova media caputre plugin
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));
}

// capture callback
var captureSuccess = function(mediaFiles) {
    var i, path, len;
    for (i = 0, len = mediaFiles.length; i < len; i += 1) {
        path = mediaFiles[i].fullPath;
        console.log(mediaFiles[i].fullPath);

          function playVideo(videoUrl) {
              // Play a video with callbacks
              var options = {
                mustWatch: true,
                successCallback: function() {
                  console.log("Video was closed without error.");
                },
                errorCallback: function(errMsg) {
                  console.log("Error! " + errMsg);
                }
              };
              window.plugins.streamingMedia.playVideo(path, options);

          }

    }
};

My buttons (HTML)

<button id="takeVideo">Take Video</button>

<input type="url" size="60" value="" id="vidUrl"/><br/>
<button type="button" onclick="playVideo(document.getElementById('vidUrl').value);">Play Video</button>

Answer 1

Edit

Here is my attempt at adjusting your code to work:

JavaScript;

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

function init() {

    document.getElementById("takeVideo").addEventListener("touchend", function() {

        console.log("Take video");

        navigator.device.capture.captureVideo(captureSuccess, captureError, {
            limit: 1
        });

    }, false);

    document.getElementById("playButton").addEventListener("touchend", function() {

        playVideo(document.getElementById('vidUrl').innerHTML);

    });

}

function captureError(e) {

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


function captureSucess(mediaFile) {

    //No need for a loop as we have limited the user to take 1 video
    var path = mediaFile.fullPath;
    var vidUrlElement = document.getElementById('vidUrl');
    vidUrlElement.innerHTML = path;


}

function playVideo(videoUrl) {
    // Play a video with callbacks
    var options = {
        mustWatch: true,
        successCallback: function() {
            console.log("Video was closed without error.");
        },
        errorCallback: function(errMsg) {
            console.log("Error! " + errMsg);
        }
    };
    window.plugins.streamingMedia.playVideo(videoUrl, options);

}

HTML;

<button id="takeVideo">Take Video</button>
<br/>
<div id="vidUrl"></div>
<br/>
<button id="playButton">Play Video</button>

Original

Have you tried moving the playVideo() function outside of the for loop?