I ve built a web app that uses the HTML5 tag and JavaScript code that renders other content synchronized with the running video It works great in desktop browsers Firefox Chrome and Safari On an iPhone or a DroidX the native video player pops up and takes over the screen thus obscuring the other dynamic content that I want to display simultaneously with the video Is there any way around this If necessary I ll figure out how to write native apps for both those platforms but it would save me a ton of effort if I could just stick with HTML5 JavaScript

In iOS 10+

Apple enabled the attribute playsinline in all browsers on iOS 10, so this works seamlessly:

<video src="file.mp4" playsinline>

Short answer: use iphone-inline-video, it enables inline playback and syncs the audio.

Long answer: You can work around this issue by simulating the playback by skimming the video instead of actually .play()'ing it.

~ Answered on 2016-04-01 05:45:52