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 WKWebView, and if UiWebView is used, video plays fine. This is scenario I have:

-User comes to screen to which video url is passed

-Via FileTransfer I download it to phone and store it at desired location

-Using JS video is loaded to <video> tag and played.

Basically I'm doing everything as described in answer to this SO question. The problem with UiWebView was that if relative path was set to src, video for some reason couldn't be loaded (no matter which combination I used), so this solution worked great for me, because it is based on this line of code:

entry.toURL()

This returns full path of the downloaded video which is great, at least for the UiWebView.

The problem for WkWebView is that entry.toURL() returns smth. like this:

file:///var/mobile/Containers/Data/Application/3A43AFB5-BEF6-4A0C-BBDB-FC7D2D98BEE9/Documents/videos/Dips.mp4

And WKWebView doesn't work with file:// protocol. Also, neither WKWebView works wit relative paths :(

Can anyone help me to fix this ?

Answer 1

I got this working today with the following but only when deployed to my device in Release mode. When deploying the app in Debug mode to my device it would not work.

• iOS 9.3.2
• Cordova 4.0.0 (iOS 3.8.0)
• Telerik WKWebView Polyfill 0.6.9

Video list load method:

var path = window.cordova.file.documentsDirectory, //iTunes File Sharing directory
    href = 'http://localhost:12344/Documents', //WKWebView default server url to documents
    list = [];
function fsSuccess(dir) {
    var reader = dir.createReader();
    reader.readEntries(function (entries) {
        for (var i = 0; i < entries.length; i++) {
            list.push({ name: entries[i].name, path: href + entries[i].fullPath });
        }
    });
}
function fsError(error) {
    console.log('error', error)
}
window.resolveLocalFileSystemURL(path, fsSuccess, fsError);

Video list click handler:

var video = $('#video')[0],
    source = $('#source');
function play(index) {
    source.attr('src', list[index].path);
    video.load();
    video.play();
}

Video player markup:

<video id="video" autoplay controls loop webkit-playsinline>
    <source id="source" type="video/mp4" />
</video>

I was banging my head on my desk a la Ren Hoek while debugging until I attempted a release buid and it worked.

Answer 2

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