can-autoplay

The auto-play feature detection in HTMLMediaElement (<audio> or <video>).

Usage no npm install needed!

<script type="module">
  import canAutoplay from 'https://cdn.skypack.dev/can-autoplay';
</script>

README

can-autoplay.js

The auto-play feature detection in HTMLMediaElement (<audio> or <video>).

FileSize Version

Demo page

Table of contents:

Installation

npm install can-autoplay

Files

Build files are available in the build/ directory. Bundlers will choose get the correct file chosen for them but if you just want to include it on the page, grab the build/can-autoplay.js file.

API

audio(options)

Parameters:

  • options.inline <Boolean>, check if auto-play is possible for an inline playback, default value is false
  • options.muted <Boolean>, check if auto-play is possible for a muted content
  • options.timeout <Number>, timeout for a check, default value is 250 ms

Returns:

  • <Promise>, resolves to a <Object>:
    • result <Boolean>, true - if auto-play is possible
    • error <Error>, internal or timeout Error object
canAutoplay.audio().then(({result}) => {
  if (result === true) {
    // Can auto-play
  } else {
    // Can not auto-play
  }
})

video(options)

Parameters:

  • options.inline <Boolean>, check if auto-play is possible for an inline playback, default value is false
  • options.muted <Boolean>, check if auto-play is possible for a muted content
  • options.timeout <Number>, timeout for a check, default value is 250 ms

Returns:

  • <Promise>, resoles to a <Object>:
    • result <Boolean>, true - if auto-play is possible
    • error <Error>, internal or timeout Error object
canAutoplay.video().then(({result}) => {
  if (result === true) {
    // Can autoplay
  } else {
    // Can not autoplay
  }
})

Example

import canAutoPlay from 'can-autoplay';

canAutoPlay
    .video({timeout: 100, muted: true})
    .then(({result, error}) => {
        if(result === false){
            console.warn('Error did occur: ', error)
        }
    })

Media

Implementation Details

If it's required to have a legacy browser support you could use latest v2.x.x version of the library.