video-dev/can-autoplay

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

can-autoplay's Issues

RFC rename `inline` option to `playsinline`

Discussion started here

Autoplay resolving false in Edge 17 with muted check

First of all thank you for having this package available. It makes detecting autoplay way easier than I expected at first. I have successfully implemented this within my project and cross-browser tested it along our supported range (IE11, last 2 Chrome/Safari/Firefox) with a muted video.

And the video snippet is formatted like this plain example (no additional scripting only verifying whether it can play):

<video  autoplay loop muted>
  <source src="http://myfancyvideo.com/video.mp4" type="video/mp4">
</video>

When looking Edge version 15 it gives an expected result true:

But when running the following in Edge 17 (v17.17134 to be specific):

canAutoPlay.video({ timeout: 1000, muted: true }).then(({ result }) => {
    console.log(result);
});

It will instantly return false and throws a DOM Exception:

code: 9,
message: "NotSupportedError"

When not checking it autoplay the muted video as expected. So after that I also ran the demo page in Edge and it gives the following results.

Feature request : allow to pass html video element in options

Currently, the library creates a video element to perform play using blob source.

It would be nice to be able to pass an already created video element in options object (and create element as default behaviour if no element provided).

The use case if for video player which "recycle" video element to load another media without changing page. (as soon as video is played is the result of user interaction, the video element keep the user consent and can be reused). This technique is used, for example, in Clappr video player.

play() fails on Chrome 69

Demo fails on Chrome 69.
Is it a false positive? autoplay blocking was supposed to be enabled only in Chrome 70.

Autoplay muted in Safari + iOS 12 resolving to false while it should work

While using the can-autoplay demo page it shows that autoplay muted does not work on iOS 12 + Safari. However, when using a player like JWP it does autoplay muted on the same device/browser.

See this video where can-autoplay resolves autoplay muted to false, but it works with another video player.

https://youtu.be/KD4aMfeNZy0

Safari 11 incorrect detect

canAutoPlay
    .video({timeout: 100, muted: false})
    .then(({result, error}) => {
        
    })

result is always true, but safari 11 doesn't support autoplay with sound

Base64 vs Blob

I hardly see a value in Base64 implementation where Blob implementation works for the majority of library users, and so far nobody discovered real weaknesses of Blob approach.

I propose to do a research and comparison Base64 vs Blob. If we will find out that Blob has only good parts, we should optimize and tune library inner logic around Blob implementation. The idea to have internal regular expressions is not good enough for a small and efficient library.

When I saw a proposal/request for Blob, my instant thoughts were:

• What is a performance (detection time) difference?
• How could Blob be done on build step? So we don't need waste time at runtime.
• What pitfalls with Blob other than overall legacy browser support.

Detection

I'm looking into detection, and have couple doubts:

1. Should we use playing event? https://github.com/video-dev/can-autoplay/blob/master/lib/index.js#L31

2. I think it's possible to have video outside of DOM tree - https://github.com/video-dev/can-autoplay/blob/master/lib/index.js#L61

Trying to use this in React project and "Blob" is not defined

Looks like there is a missing dependency "Blob". How do I remedy? I tried installing blob from npm and importing it but it didn't work.

ReferenceError: Blob is not defined
    at eval (webpack-internal:///./packages/interpayments-theme/node_modules/can-autoplay/build/can-autoplay.es.js:6:14)
    at Module../packages/interpayments-theme/node_modules/can-autoplay/build/can-autoplay.es.js (/home/davidrhoderick/Development/interpayments/frontity/build/server.js:5043:1)
    at __webpack_require__ (/home/davidrhoderick/Development/interpayments/frontity/build/server.js:27:30)
    at eval (webpack-internal:///./packages/interpayments-theme/src/components/partials/page-hero.js:10:70)
    at Module../packages/interpayments-theme/src/components/partials/page-hero.js (/home/davidrhoderick/Development/interpayments/frontity/build/server.js:6116:1)
    at __webpack_require__ (/home/davidrhoderick/Development/interpayments/frontity/build/server.js:27:30)
    at eval (webpack-internal:///./packages/interpayments-theme/src/components/home.js:7:77)
    at Module../packages/interpayments-theme/src/components/home.js (/home/davidrhoderick/Development/interpayments/frontity/build/server.js:5900:1)
    at __webpack_require__ (/home/davidrhoderick/Development/interpayments/frontity/build/server.js:27:30)
    at eval (webpack-internal:///./packages/interpayments-theme/src/components/index.js:12:63)

canAutoPlay opens a fullscreen overlay with 0 seconds on iPhone

Hi,
on iOS 14.2 the canAutoPlay.video() opens a fullscreen overlay of the test with 0 seconds.
Can we prevent this?

False positive for Safari iOS 11.2

Visiting the page https://video-dev.github.io/can-autoplay/ says Safari iOS can't autoplay, even unmuted videos.

Use standards-track `allowedToPlay` if available

There's work to have a native method to know whether we're allowed to play, so, we should use that method if it's available. Mozilla said they're going to ship it in Firefox 63

whatwg/html#3617

Usage of audio check in muted tab only works first call

Working with version 3.0.2, I have a call to the canAutoplay.audio() which correctly yields false when called the first time. However subsequent calls always return true.

Tried with chrome: Version 108.0.5359.98 (Official Build) (64-bit) on Linux, Chrome on android tablet and the behavior is the same. First call works like it should, second call always returns true.

canAutoPlay.video() opens a fullscreen overlay on iPhone

Hi,
on iOS 14.2 the canAutoPlay.video() opens a fullscreen overlay of the test with 0 seconds.
Can we prevent this?

Push 3.0.0 tag

npm, package.json, and CHANGELOG.md all have v3.0.0, but the git tag doesn't show up - can you git push the tag?

Support for below ES6

Thanks for starting this project!

I tried this out today and had some trouble using uglify as the code is in ES6. Any chance we could add a build step to use babel or something similar to transform the code to ES5?

iOS >= 10 - Mobile Safari

Is the muted video expected to fail on iOS?

The policy mentioned it would be allowed,
https://webkit.org/blog/6784/new-video-policies-for-ios/

Will do some more searching on this too.

Edit: It seems muted autoplay is possible with the playsinline attribute.
jsfiddle: http://jsfiddle.net/luwes/kb5s9tuh/9/

Bug: The play() request was interrupted by a new load request

Version 3.0.1 give me the following error:

In Version 3.0.0 everything is fine.

My Code is the following:

canAutoPlay
          .video({ timeout: 4000, muted: false, inline: true })
          .then((data) => {
            console.log(data);
            const { result } = data;
            const startAutoplay = result === true;
            store.dispatch(actions.init(startAutoplay));
            finishPlayerInitialization(startAutoplay);
          });

Muted autoplay in Samsung native browser resolving false while actually is true

From my investigation there is an issue with muted blob on Samsung native browser that never resolving the play promise.
This causes the autoplay to be false when actually is true.
When testing the autoplay using base64 source getting the promise resolved and the right result - true.

Security

Should there be any concerns around security?

Mozilla docs recommend not adding data: to your media-src CSP.
(https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/media-src)

data: Allows data: URIs to be used as a content source. This is insecure; an attacker can also inject arbitrary data: URIs. Use this sparingly and definitely not for scripts.

Smaller dummy assets

I used a big video asset just as a PoC.
For production use, we should generate an optimized video with audio asset.

Same for audio.

Problem import

Hello, thanks a lot for this project, i have problem, after npm install i imorted can-autoplay like this:
import canAutoPlay from 'can-autoplay';
and browser console show me this:
Uncaught ReferenceError: canAutoplay is not defined
why is it happen?
10x!)

Returning a false negative for Chrome Windows

Last week we allowed every browser to be checked by can-autoplay and we saw a visible drop in startup times. We could narrow it down to Chrome on Windows via metrics but we couldn't reproduce it ourselves.

cc @tenacex @fisherinnovation

Suppor typescript

Hello! Thanks a lot for you library. I need to get you library in my typescript project, but i didn't find in ts libraries. Do you have plans for publish it? thx

Error: setAttribute("muted","muted") - Not implemented

Error: Not implemented
os: windows 10, windows 7
browsers: Yandex Browser(17.1.0), Opera 54.0.2952, Chrome 67.0.3396
snip:

 .timeout,r=e.inline,a=t(),s=a.element,o=a.source,l=void 0,u=void 0,d=void 0;return s.muted=n,!0===n&&s.setAttribute("muted","muted"),!0===r&