Search code examples
javascriptcordovawindows-phonevisual-studio-cordova

set video to html video tag - cordova app


My app is a cordova hybrid Windows phone 8.1 app.

I am capturing a video with media-capture plugin and getting the video url in my callback which is something like this:

/VideoCache/Video-7c5eb8ae-5c3d-48ee-9f3b-0805e81ebc06.mp4

How can I set this video to an html video tag.

I created a super simple project to reproduce this error and shared on onedrive

here is the way I am calling it through javascript:

    // Called when capture operation is finished
//
    function captureSuccess(mediaFiles) {
     var i, len;
    console.log("captureSuccess, mediaFiles: " + JSON.stringify(mediaFiles));
    console.log("mediaFiles.fullPath: " + mediaFiles[0].fullPath);

        //document.querySelector("#video1 > source").src = "http://www.w3schools.com/html/movie.mp4";
    document.querySelector("#video1 > source").src = mediaFiles[0].fullPath;

}

// 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: 1 });
}

Solution

  • it is an issue for windows phone 8.1. Seems the local video cannot be accessed within webbrowser control which is used by cordova for windows 8 and windows 8.1 silverlight app. Here the link on MSDN.