This past weekend, I was writing a simple HTML5 utility that provides certain videos that I have in my own personal library. The idea is that I can make a limited selection of videos and present it on a web page, so that the user can simply click on the cover art of the video and plays inline on the web page.
I thought it was a pretty simple requirement and I should be able to whip this up in a few minutes. I used the HTML5 <video> tag. Everything worked on my Mac and my iPad. It even worked on my LG OLED TV. However, when it came to the iPhone, mobile Safari would load the movie but it would not play. I was even able to seek through the movie by scrubbing the scroll bar, but when I press the play/pause button, nothing would happen.
After many hours scouring the web, I found out many caveats when serving videos on iOS with the iPhone.
- Videos behind an authorized location may not work on an iPhone because when Safari passes this information to the player, the player does not inherit the previously authorized identity. To get around this, I had to create a token based technique, where the main page have to pass this token to a PHP page that checks this token and serves the video contents.
- The PHP used to serve the video also need to handle HTTP Range based requests. This wonderful contribution from GitHub really helped me out!
- Multichannel audio such as 5.1 audio encoded in AAC will load but not play on my iPhone XS currently running iOS 13. The video will play if I re-encode the audio to either AAC stereo, or 5.1 multichannel in AC3 encoding.
- Multiple audio streams also did not work. The iOS player was only happy with a single compatible audio stream.
- If you want to make the video autoplay while inlined within the page, it must first be muted.
Lots of things to consider here. I lost about a day and halve researching and experimenting with this, so here it is all recorded just in case I forget in the future. I also hope that this information will help you out as well.