Webview plugin iOS partial content


#1

Our app downloads videos in the dataDirectory of the app which are then supposed to be playable offline. I am using convertFileSrc to transform the file:// link to an http:// one and set it to the src property of the video tag.

I get an MEDIA_ERR_SRC_NOT_SUPPORTED error. After some investigation I am suspecting the reason is because the content is not served as partial content, something that is a requirement for iOS.

So, my question is: how do I make ionic’s webview serve files with partial content requests?


#2

Any help on this one?


#3

Which plugin are you using? My guess based on that error is that the format of the video can’t be converted. Does it work in Android? Have you tried with other videos with other format?


#4
  1. I am using the FileTransfer plugin to download the video to file.dataDirectory
  2. Then using the WebView plugin to convert the file link into a URL (as mentioned in the original post)
  3. Then just using that as the src of a video

Yes, it works for Android.

It also works if I relatively reference the file i.e. not use a URL but a relative like “assets/myVideo.mp4” . This is for the exact same video that won’t play when referenced with the webview URL. I strongly suspect it’s because partial requests are not supported because we had the same issue in iOS with files being served from our server and when we changed our server to support partial requests then videos started working.


#5

Actually this might be a problem for Android as well. It works on the simulator but on devices the video stops after playing 1-2 seconds

More info:
Looking at the network tab it seems like the video starts to load and then almost immediately the request is cancelled, hence why only a couple seconds play before seeing the error : “The media playback was aborted due to a corruption problem or because the media used features your browser did not support.”


#6

As a workaround I am loading the video into memory as an array buffer, then transform it into a blob and then set it as the source of the video. It is not ideal as this means there is a delay and the user waits for the video to load but it will have to do.

Another workaround is to use the file opener plugin to invoke the native app but then that makes it easy for the user to save/share the video wherever they want which is something we want to avoid.