iOS now supports this natively since v10. So long, and thanks for all the videos!
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:
autoplay
attribute (demo)enableInlineVideo(video)
, donevideo.play()
on click
Limitations:
requestAnimationFrame
, so avoid expensive animations and similar while the video is playing. Try stats.js to visualize your page's frameratePick your favorite:
<script src="https://github.com/fregante/iphone-inline-video/raw/master/dist/iphone-inline-video.min.js"></script>
npm install --save iphone-inline-video
var enableInlineVideo = require('iphone-inline-video');
import enableInlineVideo from 'iphone-inline-video';
You will need:
a <video>
element with the attribute playsinline
(required on iOS 10 and iOS 11. Why?)
<video src="https://github.com/fregante/iphone-inline-video/raw/master/file.mp4" playsinline></video>
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
.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
opacity: 0;
pointer-events: none;
width: 5px;
}
the activation call
// one video
var video = document.querySelector('video');
enableInlineVideo(video);
// or if you're already using jQuery:
var video = $('video').get(0);
enableInlineVideo(video);
// or if you have multiple videos:
$('video').each(function () {
enableInlineVideo(this);
});
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:
enableInlineVideo(video);
video.addEventListener('touchstart', function () {
video.play();
});
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.
If your video file doesn't have an audio track, then must set a muted
attribute:
<video muted playsinline src="https://github.com/fregante/iphone-inline-video/raw/master/video.mp4"></video>
The autoplay
attribute is also supported, if muted
is set:
<video autoplay muted playsinline src="https://github.com/fregante/iphone-inline-video/raw/master/video.mp4"></video>
Muted videos can also be played without user interaction — which means that video.play()
doesn't need to be called inside an event listener:
<video muted playsinline src="https://github.com/fregante/iphone-inline-video/raw/master/video.mp4"></video>
setTimeout(function () { video.play(); }, 1000); // example
The iPad already supports inline videos so IIV is not enabled there.
The only reason to enabled IIV on iPad:
To enabled IIV on the iPad:
enableInlineVideo(video, {
iPad: true
});
New features in iOS 10 and iOS 11:
videos play inline:
<video playsinline src="https://github.com/fregante/iphone-inline-video/raw/master/video.mp4"></video>
muted videos play inline without user interaction:
<video muted playsinline src="https://github.com/fregante/iphone-inline-video/raw/master/video.mp4"></video>
setTimeout(function () { video.play(); }, 1000); // example
muted videos autoplay inline:
<video autoplay muted playsinline src="https://github.com/fregante/iphone-inline-video/raw/master/video.mp4"></video>
Essentially everything that this module does, so iphone-inline-video
will be automatically disabled on iOS 10-11. Make sure you use the playsinline
attribute.
MIT © Federico Brigante