Question

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

-User进入屏幕传递视频网址

-Via 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

使用cordova文件打开程序插件从设备打开下载文件的示例代码段。（虽然未在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
            }
        }
    );
};

Answer 2

我今天使用以下功能，但只有在发布模式下部署到我的设备时才。在调试模式下将应用程序部署到我的设备时，它将无法正常工作。

iOS 9.3.2
Cordova 4.0.0（iOS 3.8.0）
Telerik WKWebView Polyfill 0.6.9

视频列表加载方法：

<TextBlock Name="TextBlock1" Tag="{local:ProblemStatement 'hello'}"/>

视频列表点击处理程序：

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

在调试之前，我正在敲桌子和Ren Hoek，直到我尝试发布版本并且它有效。

Cordova iOS视频标签本地文件源

2 个答案: