Can I avoid the native fullscreen video player with HTML5 on iPhone or android

Question

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

User · Answer

In iOS 10 beta 4 The right code in HTML5 is   lt video src  file mp4  webkit-playsinline  true  playsinline  true  gt    webkit-playsinline is for iOS  lt  10  and playsinline is for iOS    10  See details via https   webkit org blog 6784 new-video-policies-for-ios

User · Answer

In iOS 10   Apple enabled the attribute playsinline in all browsers on iOS 10  so this works seamlessly    lt video src  file mp4  playsinline gt    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  play   ing it

User · Answer

According to this page  https   developer apple com library archive documentation AppleApplications Reference SafariHTMLRef Articles Attributes html 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

User · Answer

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

User · Answer

Old answer  applicable till 2016  Here s an Apple developer link that explicitly says that - on iPhone and iPod touch  which are small screen devices   quot Video is NOT presented within the Web Page quot  Safari Device-Specific Considerations Your options   The webkit-playsinline attribute 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 UIWebView allows to play the video inline  but only if you set the allowsInlineMediaPlayback property for the UIWebView class to true

User · Answer

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 YES    Fortunately for you  you can also adjust this behaviour in HTML as follows    lt video id  myVideo  width  280  height  140  webkit-playsinline gt      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

[iphone] Can I avoid the native fullscreen video player with HTML5 on iPhone or android?

Examples related to iphone

Examples related to android

Examples related to html

Examples related to video

Examples related to fullscreen