Cordova iOS Video tag Local File Source

Question

I have problem playing local video on iOS on my Cordova based app. At the beginning I want to stress out that this problem is happening only when I\'m using WKWebVie

Answer 1

Sample snippet that uses cordova file opener plugin to open the download file from device.(Not tested in WKWebView though)

var fileTransfer = new FileTransfer();
var cdr;

if (sessionStorage.platform.toLowerCase() == "android") {
    window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory, onFileSystemSuccess, onError);
} else {
    // for iOS
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, onError);
}

function onError(e) {
    navigator.notification.alert("Error : Downloading Failed");
};

function onFileSystemSuccess(fileSystem) {
    var entry = "";
    if (sessionStorage.platform.toLowerCase() == "android") {
        entry = fileSystem;
    } else {
        entry = fileSystem.root;
    }
    entry.getDirectory("Cordova", {
        create: true,
        exclusive: false
    }, onGetDirectorySuccess, onGetDirectoryFail);
};

function onGetDirectorySuccess(dir) {
    cdr = dir;
    dir.getFile(filename, {
        create: true,
        exclusive: false
    }, gotFileEntry, errorHandler);
};

function gotFileEntry(fileEntry) {
    // URL in which the pdf is available
    var documentUrl = "http://localhost:8080/testapp/test.pdf";
    var uri = encodeURI(documentUrl);
    fileTransfer.download(uri, cdr.nativeURL + "test.pdf",
        function(entry) {
            // Logic to open file using file opener plugin
            openFile();
        },
        function(error) {
            navigator.notification.alert(ajaxErrorMsg);
        },
        false
    );
};

function openFile() {
    cordova.plugins.fileOpener2.open(
        cdr.nativeURL + "test.pdf",
        "application/pdf", //mimetype
        {
            error: function(e) {
                navigator.notification.alert("Error Opening the File.Unsupported document format.");
            },
            success: function() {
                // success callback handler
            }
        }
    );
};