Modernizr.videoautoplay object shows true, Modernizr.videoautoplay returning undefined

Question

I'm using a custom Modernizr build, v3.3.0. I've created a simple JSFiddle example to illustrate: https://jsfiddle.net/cqkg7x45/6/.

console.log(Modernizr);

will show the Modernizr object, and when I inspect it in the JS console I can see "videoautoplay" is a property with a value of "true".

But, when I do

console.log(Modernizr.videoautoplay)

it returns "undefined".

I was originally seeing this issue in a WordPress theme I'm developing, but was also able to recreate in JSFiddle and a separate stand-alone HTML page. Also, Modernizr is putting the "videoautoplay" class on my HTML tag, even when I know the device does not support that feature (iPhone 5).

Update: This issue appears to be happening in Chrome (v47.0.2526.106), but not Firefox (v43.0.2).

score 1 · Accepted Answer · edited May 23 '17 at 11:59

I'm going to answer my own question in case anyone else runs into this problem. I found the solution on this SO post: How do I detect if the HTML5 autoplay attribute is supported?.

Since this is an "async" test you can't access the property using the syntax

Modernizr.videoautoplay

You have to use the .on() function, as shown in the above SO post:

Modernizr.on('videoautoplay', function(result){
  if(result) {
    alert('video autoplay is supported');
  }  else {
    alert('video autplay is NOT supported');
  }
});

Modernizr.videoautoplay object shows true, Modernizr.videoautoplay returning undefined

1 Answers1