Search code examples
ioscordovavideohtml5-videoinappbrowser

Cordova iOS: Load videos with downloaded html's and video files

I have the following issue:

  • I have an iOS Cordova Application.
  • The application download a zip file and decompress it in "cdvfile://localhost/persistent/content/myfolder" by ussing the following Cordova plugins: org.apache.cordova.file-transfer, org.apache.cordova.file and https://github.com/MobileChromeApps/zip.git
  • Inside the zip there is an "index.html" file with "video tags" on it.
  • I was able to succesfully load and execute the "index.html" file, but the video doesn't load.

I know that the video file was decompressed successfully because:

  • I check the file inside my iPad.

  • I embed the video in the index of the cordova app (not the downloaded one) in the following way and it works:

     var videocontainer = document.getElementsByTagName('video')[0];
 var videosource = document.getElementsByTagName('source')[0];
 var newmp4 = cordova.file.documentsDirectory + 'content/myfolder/videos/myvideo.mp4';
 videosource.setAttribute('src', newmp4);
 videocontainer.load();
 videocontainer.play();

But, the video is not loaded/played inside the downloaded HTML file. To understand what I'm doing, I have to develop an application that will be updated by downloading its contents from zips, and the contents includes pages with videos embeded on them. It works on PC and Android, but not in iOS.

I tried the following things:

  • Loading the page in "_self". The page is displayed but not the video.
  • Loading the page in an iframe. Same result.
  • Loading the page within an inAppBrowser (plugin). Same result.
  • Video tag with source src="videos/myvideo.mp4" (works in Web and Android). Same result.
  • Video tag with source src="./videos/myvideo.mp4" (works in Web and Android). Same result.
  • Video tag with source src= cordova.file.documentsDirectory + 'content/myfolder/videos/myvideo.mp4' (with JS, by passing the path in a query string, same path that works in the root index.html as I described before). Same result.
  • Video tag with source src= cordova.file.documentsDirectory + 'cdvfile://localhost/persistent/content/myfolder/videos/myvideo.mp4'. Same result.
  • All the combination of previous things. Same result....

Loading the downloaded resources in a DIV is not an option, because the resources (images, css, javascripts, audios, videos, etc.) are downloaded on other iOS device's folder: the app's Documents' folder (cdvfile://localhost/persistent/).

I thing I tried almost everything... Why is not trivial to play a video tag, inside an html, that are both in the app's Documents' folder???

:-(

EDIT 1: Cordova Version = 3.6.3

Solution

  • Solution Founded!!

    In almost all the android and iOS examples, downloaded content is being executed from "cordova.file.documentsDirectory".

    Then, when you link this content in a or (by using AJAX), everything works fine (CSS, images, links) but media tags ( and ).

    Again, I dont know why, but almost all the examples downloads and unzip contents by using this path.

    After several days being blocked with this issue (I found lots of forums where the devs have to modify all their projects by using plugins like Cordova Media, jaeger25 Html5Video, etc, etc), I tried by using the following path: "cordova.file.dataDirectory"

    I download, unzip and execute the HTMLs from this path and everything works with no parsing/modifications to the HTML files (that in my case were thousands). 100% compability with and tags with relative sources' path in an IFRAME!!!!!!