Cordova iOS 视频标签本地文件源

Question

我在基于 Cordova 的应用上播放 iOS 上的本地视频时遇到问题。一开始我想强调这个问题只有在我使用WKWebView时才会出现，如果使用UiWebView，视频播放正常。这是我的场景：

-用户来到视频 url 传递到的屏幕

-通过 FileTransfer 我将其下载到手机并将其存储在所需位置

-使用JS视频加载到<video>标签并播放。

基本上，我正在按照对这个 SO question 的回答中的描述做所有事情。 UiWebView 的问题是，如果相对路径设置为 src，由于某种原因无法加载视频（无论我使用哪种组合），所以这个解决方案对我来说非常有用，因为它基于这行代码：

entry.toURL()

这会返回下载视频的完整路径，这很棒，至少对于 UiWebView 而言。

WkWebView 的问题是 entry.toURL() 返回 smth。像这样：

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

而且 WKWebView 不适用于 file:// 协议。此外，WKWebView 都不适用于相对路径:(

谁能帮我解决这个问题？

Answer 1

我今天通过以下方式完成了这项工作，但仅在以发布模式部署到我的设备时。以调试模式将应用程序部署到我的设备时，它不起作用。

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

视频列表加载方式：

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

视频列表点击处理程序：

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

视频播放器标记：

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

我在调试时像 Ren Hoek 一样把头撞在桌子上，直到我尝试发布版本并且它成功了。

Answer 2

使用 cordova 文件打开器插件从设备打开下载文件的示例 sn-p。（虽然未在 WKWebView 中测试）

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