I’m building an app in which the user reproduces several html5 videos in different components as the pageflow advances. The mp4 sources of the videos come from the local file system.
Everything is working nicely on a web version I deployed on a server and people are using with Chrome.
However in iOS, after reproducing approximately 18 of these videos, ALL the videos an all pages stop working and just black boxes show up. (I was able to reproduce it on an iPad 3 and 4)
Any ideas of what may be causing this? I have the feeling it must have something to do with some kind of Cache / Memory, because the problem only appears after an approximate amount of videos are reproduced. Also, the videos are playable again after I close and re-open the app.
Example of the videos markup:
<video id=“video_1” playsinline playsinline=“playsinline” webkit-playsinline webkit-playsinline=“webkit-playsinline”>
<source [attr.src]=“ds.normalizeURL(video[0])” type=“video/mp4”/>
</video>
I will try to see if it has something to do with files cached on File.cacheDirectory but I’m not feeling very lucky with this approach.
ALTERNATIVELY,
is there a way in Ionic to play videos with native capabilities but being able to reproduce them inline within the page layout and not full screen? I haven’t found anything
My versions:
Ionic: 3.9.2
Angular: 5.2.9