Inline video playback on iPhone - my solution

As iPhone users know, when viewing an online video on the iPhone, the video plays in full screen using the device native player.

This presents a major limitation for advertisers since video ads are not clickable and overlay ads cannot be displayed. 
Any custom user interaction during video playback is not supported which prevents interactive videos and games.

There are few approaches for a solution, and here is mine, which I hope you find helpful.

Demo (open on an iPhone): http://amirch1.github.io/VideoInline/
Github code under MIT license: https://github.com/amirch1/VideoInline

The solution:

1. Create an Audio tag and give it the source of the Video tag. Audio tags support any video format (mp4, m3u8 HLS streams, live) and play inline.
2. Hide the Video tag native controls using Shadow DOM CSS rules.
3. Add custom Play / Pause button and a progress bar.
4. Clicking the Play button triggers the Audio tag play() method. It also invokes the Video tag load() method which enables video seek operation.
5. A timed interval is set to sync the Video tag currentTime property to the Audio tag currentTime property. The time interval actually defines the playback frame rate enabling balance between quality and performances. It also updates the progress bar.
6. Seeking using the progress bar sets the Audio tag currentTime value. The Video tag updates accordingly by the timer refresh.

Thats it! 

Rather simple, provides real audio sync and supports all video formats including mp4, HLS and live streams.

Can be easily enhanced to support fullscreen playback without loosing interactivity and additional video controls.

Feel free to play with the code, submit pull requests and star the Github repository :)