Cordova iOS視頻標籤本地文件源

Question

我在我的基於Cordova的應用上在iOS上播放本地視頻時出現問題。在開始時，我想強調，只有當我使用WKWebView時纔會發生此問題，並且如果使用UiWebView，則視頻播放效果良好。這是我的情況有：

- 用戶來篩選哪個視頻URL傳遞

-via文件傳輸我把它下載到手機，並將其存儲在所需位置

- 使用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
• 科爾多瓦4.0.0（iOS的3.8.0）
• Telerik的WKWebView填充工具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> 

我撞我的頭我的辦公桌上拉仁霍克同時調試，直到我試圖釋放打造專業化和它的工作。

Answer 2

示例代碼段。（在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 
      } 
     } 
    ); 
};