Make videos playable inline on Safari on iPhone (prevents automatic fullscreen)

This 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)
• Play multiple silent videos at the same time
• Use videos as WebGL/ThreeJS textures (demo)

This is essentially a polyfill for the upcoming iOS 10's webkit-playsinline

• <2KB, standalone (no frameworks required)
• No setup: include it, call makeVideoPlayableInline(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)
• Currently limited to iPhone, unneeded on iPad, 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

npm install --save iphone-inline-video

const makeVideoPlayableInline = require('iphone-inline-video');

If you don't use node, include the file dist/iphone-inline-video.browser.js

You will need:

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

   <video src="file.mp4" webkit-playsinline></video>

• the native play buttons will still trigger the fullscreen, so it's best to hide them (without breaking the video controls)

   .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');
   makeVideoPlayableInline(video);

   // or if you're already using jQuery:
   var video = $('video').get(0);
   makeVideoPlayableInline(video);

   // or if you have multiple videos:
   $('video').get().forEach(makeVideoPlayableInline)

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:

makeVideoPlayableInline(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 you need this:

makeVideoPlayableInline(video, /* hasAudio */ false);

And the muted attribute

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

Muted videos can also be played without user interaction (video.play() doesn't need to be called inside an event listener).

Thanks to the above behavior, muted videos can also autoplay:

makeVideoPlayableInline(video, /* hasAudio */ false);

And the autoplay and muted attributes:

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

New features in iOS 10:

• videos play inline:

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

• muted videos play inline without user interaction:

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

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

• muted videos autoplay inline:

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

Essentially everything that this module does, so iphone-inline-video will be automatically disabled there. Make sure you have all the above attributes.

MIT © Federico Brigante