iphone-inline-video
Make videos playable inline on Safari on iPhone (prevents automatic fullscreen)
This enables iOS 10's playsinline
attribute on iOS 8 and iOS 9 (almost a polyfill). It lets you:
- Play videos without forcing the fullscreen on the iPhone (demo)
- Play silent videos without user interaction
- Autoplay silent videos with the
autoplay
attribute (demo) - Use videos as WebGL/ThreeJS textures (demo)
Main features
- <2KB, standalone (no frameworks required)
- No setup: include it, call
enableInlineVideo(video)
, done - No custom API for playback, you can just call
video.play()
onclick
- Supports audio
- Supports autoplay on silent videos
- Doesn't need canvas
- Doesn't create new elements/wrappers
- It works with existing players like jPlayer
- Disabled automatically on iOS 10
Limitations:
- Needs user interaction to play videos with sound (standard iOS limitation)
- Limited to iPhone with iOS 8 and 9. iPad support needs to be enabled separately. It's disabled on Android.
- The video framerate depends on
requestAnimationFrame
, so avoid expensive animations and similar while the video is playing. Try stats.js to visualize your page's framerate - Known issues
Install
Pick your favorite:
npm install --save iphone-inline-video
var enableInlineVideo = ;
;
Usage
You will need:
-
a
<video>
element with the attributeplaysinline
(this is needed on iOS 10) -
the native play buttons will still trigger the fullscreen, so it's best to hide them when iphone-inline-video is enabled. More info on the
.IIV
CSS class -
the activation call
// one videovar video = document;;// or if you're already using jQuery:var video = ;;// or if you have multiple videos:;
Done! It will only be enabled on iPhones and iPod Touch devices.
Now you can keep using it just like you would on a desktop. Run video.play()
, video.pause()
, listen to events with video.addEventListener()
or $(video).on()
, etc...
BUT you still need user interaction to play the audio, so do something like this:
;video;
If at some point you want to open the video in fullscreen, use the standard (but still prefixed) webkitEnterFullScreen()
API, but it has some caveats.
Usage with audio-less videos
If your video file doesn't have an audio track, then you have to set a muted
attribute:
Usage with autoplaying videos
The autoplay
attribute is also supported, if muted
is set:
Muted videos can also be played without user interaction — which means that video.play()
doesn't need to be called inside an event listener:
; // example
Usage on iPad
The iPad already supports inline videos so IIV is not enabled there.
The only reason to enabled IIV on iPad:
- you want muted videos to autoplay, or
- you want to play videos without user interaction
To enabled IIV on the iPad:
;
Notes about iOS 10
New features in iOS 10:
-
videos play inline:
-
muted videos play inline without user interaction:
; // example -
muted videos autoplay inline:
Essentially everything that this module does, so iphone-inline-video
will be automatically disabled on iOS 10. Make sure you use the playsinline
attribute.
License
MIT © Federico Brigante