My question:
How to let html5 video element to play a video file (mp4) stored in the ios native storage?
In android, my code works well.
More details:
My app will download a small (~3m) mp4 file to mobile native storage and use html5 video player to play it in Ionic
The detailed steps are:
using Ionic native FileTransfer to download the file to mobile native storage
get the URL of the local mp4
use the URL as video source in html5 video element
My issue:
The video plays well in Android, but fails to load in ios.
My troubleshooting:
I have inserted console.log to ensure that the mp4 has successfully downloaded in iphone to, for example file:///var/mobile/Containers/Data/Application/7B740AAF-C1FB-42E9-BF3F-924FAFCC78D1/tmp/myVideo.mp4, and use this Url in html5 video element.
I have tried to download mp4 to both tempDirectory and documentsDirectory in ios, reaching the same issue.
well, I found it, and hopefully it can help followers.
Two issues actually:
he /file:// prefix should be truncated out from the video Url. so videoUrl.replace(/file:\/\//g, "") is needed. (this applies to playing audio file too!)
the liveload in ionic cordova run ios --device -l fails to load the local mp4 (I don’t know why). When running without -l, it works well.
a side note: liveload also generates runtime error network error page, which I have no clue either.
I think I will try find a better way other than liveload to debug my app in ios device…
Thank you so much for coming back and answering your own question for all those (like me) looking for the same thing. Your solution worked perfectly. Thank you thank you thank you!
You have to be careful - just because it is a mp4 file does not means it will be accepted.
Send me an message and send you a sample video which should play OK.
Not allowed to load local resource: file:///Users/{username}/Library/Developer/CoreSimulator/Devices/F85E734A-3D09-4BC2-9E7F-9D79B38FEFF1/data/Containers/Data/Application/E6059384-17BA-4BBE-8DB5-DB5440657238/Library/NoCloud/Project/Intro/36.mp4
I have googled but didn’t find anything related to it.
< video width=“100%” height=“100%” controls autoplay>
<source [src]=“convertSrc” type=“video/mp4”>
Your browser does not support the video tag.
< /video>
What is the point of fooling around with window and the DOM instead of just building up the video source URL in the controller and then just binding [src] in the template? That would seem more Angular-y to me.