Noncommital Premarital Mischief
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    @zouloux/iphone-inline-videopublic

    iphone-inline-video

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

    gzipped size Travis build status npm version

    This enables iOS 10's playsinline attribute on iOS 8 and iOS 9 (almost a polyfill). It lets you:

    • Play videos without going 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)

    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 (required on iOS 10 and iOS 11. Why?)

      <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 must 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 and iOS 11:

    • 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-11. Make sure you use the playsinline attribute.

    License

    MIT © Federico Brigante

    install

    npm i @zouloux/iphone-inline-video

    Downloadsweekly downloads

    0

    version

    2.2.2

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar