media-play-enabler

Enables video play programmatically on modern browsers that require user input events

Why

On most mobile device browsers, calling video.play() is only allowed from inside gesture events such as onclick or touchend.

iOS Safari, iOS Chrome

On most desktop modern browsers, calling video.play() is only allowed after the user has done any explicit interaction with the DOM, such as click or mousedown somewhere at least once. Events such as mouseover are not enough.

Desktop Chrome >= 66, Android Chrome, Windows Edge

On these browsers, calling video.play() works without any interaction only if the video is either muted or the video does not have an audio track.

iOS Safari, iOS Chrome

On the rest, it doesn't work even without audio.

Desktop Chrome, Android Chrome, Windows Edge

How it works

1. It creates a video element (or reuses a provided one)
2. Its instance will be reused for all videos played (this is required for mobile since the )
3. It attaches a mobile touchstart or a desktop mousedown event to document in order to enable the first video.play() of a blank video.
4. It sends events to know when we can play videos
5. Changing videos is done by changing the video source, not the video element.

Usage

1. Create a MediaPlayEnabler instance as early as possible (in order to have more chances to intercept any user gesture).
2. Call MediaPlayEnabler .canPlay() to receive a promise to know if a video can be played.
3. Use .videoElement.play(), .videoElement.pause() to control the video and .videoElement.src = 'movie.mp4' to change videos.

Install

npm install media-play-enabler

Use

import { MediaPlayEnabler } from 'media-play-enabler'

// Set the parent element for injecting 
mediaPlayEnabler.parentElement = document.getElementById('insert-video')
mediaPlayEnabler.canPlay().then((isPlayable) => {
    if (isPlayable) {
        // Change movies by changing the source
        mediaPlayEnabler.videoElement.src = 'movie1.mp4'
        mediaPlayEnabler.videoElement.play()

        mediaPlayEnabler.videoElement.src = 'movie2.mp4'
        mediaPlayEnabler.videoElement.play()

        mediaPlayEnabler.videoElement.src = 'movie3.mp4'
        mediaPlayEnabler.videoElement.play()
    } else {
        // Tell user to touch the screen
    }
})

API

See API Docs