Add support for iPad

[einarlove]

Is there a reason why iPad was not supported in the library? Videos are playing fine on my iPad.

[fregante]

iPad plays video inline autonomously, you don't need this library. Are you using it for autoplay?

[einarlove]

Yes, I'm using it for playing videos without user interaction. I've made a video carousel which changes to next video when the last one ends. I've made a fork that I use, but if you do not want to open it for iPads, there could be an option instead which overrides the userAgent test.

[einarlove]

If you know of a solution to using the native iPad player and make it possible to play/pause with javascript, please let me know.

[fregante]

If you don't need audio, use this:

if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
    makeVideoPlayableInline(video, /*hasAudio*/ false, false /*this will will skip the integrated device test*/);
}

Edit: as an heads-up, the API will be changed to something like this in v2 (whenever that comes):

if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
    enableInlineVideo(video, {
        mute: true,
        enabled: 'always'
    });
}

[einarlove]

Was not aware of the onlyWhenNeeded option. It solves my problem, thanks!

[barm]

if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
    makeVideoPlayableInline(video, /*hasAudio*/ false, false /*this will will skip the integrated device test*/);
}

Won't think unnecessarily take over playback in cases where autoplay and inline are natively supported (i.e. iOS 10)?

I ended up writing a check around the makeVideoPlayableInline:

const supportsInlineVideo = matchMedia('(-webkit-video-playable-inline)').matches;
if (/iPhone|iPad|iPod/i.test(navigator.userAgent) && !supportsInlineVideo) {
  makeVideoPlayableInline(video, false, false);
}

Seems like some of the confusion comes from people (myself included) wanting to play inline, but also enable autoplay in browsers that don't natively support it, and the API is primarily focused on the playable inline use-case.

[fregante]

Good point! Thanks for the snippet :)

[fregante]

In the v2 beta I simplified the usage on iPad. Can you try it and let me know how it goes?

• v2 changelog
• v2 usage documentation
• iphone-inline-video.js
• If you use npm, you can install the beta with: npm install iphone-inline-video@next

[fregante]

v2.0.0 has been published :)

Now you can use the iPad option:

enableInlineVideo(video, {
    iPad: true
});