Cordoba iOS Video tag Local File Source

Question

I have a problem playing local video on iOS in an application in Cordoba. First, I want to emphasize that this problem only occurs when I use WKWebView , and if I use UiWebView, the video plays normally. This is the script that I have:

-User displays the URL of the video to the screen

-Via FileTransfer I download it to my phone and save it in the right place

-Using JS video is loaded into the <video> and played.

I basically do everything as described in response to this SO question . The problem with UiWebView was that if the relative path was set to src, the video for some reason could not be downloaded (no matter what combination I used), so this solution worked great for me, because it is based on this line of code:

 entry.toURL() 

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

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

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

And WKWebView does not work with the file: // protocol. In addition, neither WKWebView works with relative paths :(

Can someone help me fix this?

Answer 1

Today I got this working with the following, but only when deployed on my device in release mode . When deploying the application in debug mode on my device, this will not work.

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

Video List Upload 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 hit my head on my a la Ren Hoek table while debugging, until I tried to free the buid, and it worked.

Answer 2

An example of a fragment that uses a plugin to open a cordon file to open a boot file from a device. (Not tested in 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 } } ); };