Html5 video tag inline at iPhone and iPad issue in iOS6

Question

Is that no way to do it? I have a site want to build to using video for background, iPad runs perfect but iPhone's not.

Then I found out the problem is iPhone safari handle the inline html5 video by default full screen, some people said it could override by html5 settings with webkit-playsinline option, but I tried and no effect on the problem.

And I also found this link: HTML5 video player behavior on iPhone and iPod in Safari Web Apps

The answer said the behivaor cannot be change even using the webkit-playsinline on it.

It that true? And if yes, are there any way to do the inline video in iPhone?

Thanks!

Answer 1

With iPad you can disable inlineMediaPlaybackRequiresUserInput in Objective-C for a web view.

On iPhone, Apple doesn't allow this option at all, so your at a loss on iPhone.

A workaround is a bit old-school, but you could use an Animated gif.

Answer 2

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

I wrote a module that takes care of playing the video and synchronizing it to the audio (but it also works on videos without a sound track): iphone-inline-video

Keep in mind that this still needs a "touch" to start, so it won't autoplay like on desktop.