In iOS 10+
Apple enabled the attribute
playsinline in all browsers on iOS 10, so this works seamlessly:
<video src="file.mp4" playsinline>
In iOS 8 and iOS 9
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
There’s a property that enables/disables in line media playback in the iOS web browser (if you were writing a native app, it would be the
allowsInlineMediaPlayback property of a UIWebView). By default on iPhone this is set to
NO, but on iPad it’s set to
Fortunately for you, you can also adjust this behaviour in HTML as follows:
<video id="myVideo" width="280" height="140" webkit-playsinline>
…that should hopefully sort it out for you. I don’t know if it will work on your Android devices. It’s a webkit property, so it might. Worth a go, anyway.
Here’s an Apple developer link that explicitly says that –
on iPhone and iPod touch, which are small screen devices, “Video is NOT presented within the Web Page”
webkit-playsinlineattribute works for HTML5 videos on iOS but only when you save the webpage to your home screen as a webapp – Not if opened a page in Safari
- For a native app with a WebView (or a hybrid app with HTML, CSS, JS) the
UIWebViewallows to play the video inline, but only if you set the
allowsInlineMediaPlaybackproperty for the
UIWebViewclass to true
In iOS 10 beta 4.The right code in HTML5 is
<video src="file.mp4" webkit-playsinline="true" playsinline="true">
webkit-playsinline is for iOS < 10, and
playsinline is for iOS >= 10
See details via https://webkit.org/blog/6784/new-video-policies-for-ios/
According to this page
it is only available if (Enabled only in a UIWebView with the allowsInlineMediaPlayback property set to YES.) I understand in Mobile Safari this is YES on iPad and NO on iPhone and iPod Touch.
I don’t know about android, but Safari on the iPhone or iPod touch will play all videos full screen because of the small screen size. On the iPad it will play the video on the page but allow the user to make it full screen.