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() on click
• 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:

<script src="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';

Usage

You will need:

• a <video> element with the attribute playsinline (this is needed on iOS 10)

  <video src="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.

Usage with audio-less videos

If your video file doesn't have an audio track, then you have to set a muted attribute:

<video muted playsinline src="video.mp4"></video>

Usage with autoplaying videos

The autoplay attribute is also supported, if muted is set:

<video autoplay muted playsinline src="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="video.mp4"></video>

setTimeout(function () { video.play(); }, 1000); // 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:

enableInlineVideo(video, {
	iPad: true
});

Notes about iOS 10

New features in iOS 10:

• videos play inline:

  <video playsinline src="video.mp4"></video>

• muted videos play inline without user interaction:

  <video muted playsinline src="video.mp4"></video>

  setTimeout(function () { video.play(); }, 1000); // example

• muted videos autoplay inline:

  <video autoplay muted playsinline src="video.mp4"></video>

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