Offline-Videoplayer from storage using Framework7 / Cordova 9

Questions
1

Dear community,

I am trying for 3 days to get a video playback for cordova-ios 5.1.1 on Cordova 9 with Framework 7 to work.

What is this app supposed do in short?

A video gets download to the device storage and should be playable from that device as an offline video player.

There were several problems I had to sort out first:

  • Stuck at Cordova 9 due to ’ cordova-plugin-file-transfer ’ which is not yet compatible with Cordova 10
  • Unable to go with Cordova 10 yet, because suggested ways to download huge files on Cordova 10 gets the memory exhausted on the device, as the data is loaded to memory completly first
  • using cdvfile:// schema to open a local video for gives me a timeout, the video does not start
  • using a local server plugin did not work for me either

I really tried a lot of configurations and code to get this to work and spent a lot of time at git trying to figure out what I might be missing.

These are the plugins I tried for a working concept of an offline video player:

hxxps://github.com/apache/cordova-plugin-wkwebview-engine

hxxps://github.com/oracle/cordova-plugin-wkwebview-file-xhr

hxxps://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix

hxxps://github.com/floatinghotpot/cordova-httpd

hxxps://github.com/communico/cordova-httpd

hxxps://github.com/nchutchind/cordova-plugin-streaming-media

This is my content security policy:

<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 
'unsafe-eval' cdvfile: data: gap: content: blob:">

The documentation on this on the web is a bit confusing mixing old stuff that apperently does not work anymore.

Please keep in mind I am not asking you for working code, but a concept that does still works and you did successfully use to play huge video files from the device storage using an HTML5-video tag on Cordova 9 ios 5.1.1.

…but some helping codelines are still appreciated of course :slight_smile:

Thank you for telling me what does definately work and what’s not anymore.

I know this is not a completly Framework7 topic, but I am really grateful about any thoughts on this, because I am stuck.

Oliver

1 Like
2

I was able to solve the issue.

Basically I had a configuration error and some filename/filepath issues with this.

I can confirm the upper concept works with this platform and plugins:

Cordova 9 @ ios 5.1.1

cordova-plugin-file-transfer 1.7.1 "File Transfer"
cordova-plugin-streaming-media 2.3.0 "StreamingMedia"
cordova-plugin-wkwebview-engine 1.2.1 "Cordova WKWebView Engine"
cordova-plugin-wkwebview-file-xhr 2.1.4 "Cordova WKWebView File XHR Plugin"

Don’t forget to add all settings to your config.xml according to the wkwebview plugin.

Make sure to set the download path like this (the documentation suggests using cdvfile://)

fileTransfer.download(encodeURI(url), cordova.file.dataDirectory + '/' + filename,...

Video playback goes like this:

window.plugins.streamingMedia.playVideo(cordova.file.dataDirectory + "/" + filename, options)

The content security policy looks like this:
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">

This solution works for Android too, by the way :slight_smile:

3 Likes
3

The offline best video player is MX Player Pro.
This is a premium application that you can download free of cost from BlackAPKs.
Here is the link below - https://blackapks.com/en/mx-player-pro