npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@zouloux/iphone-inline-video

v2.2.2

Published

Make videos playable inline on the iPhone (prevents automatic fullscreen). Forked version with common-js and es-modules available.

Downloads

1

Readme

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