How to serve video content (or not) based on browser settings

I’m building a site which will serve video as a background (using Joe Workmans Eclipse) above a certain screen size and serve a background slide show (also Eclipse) on smaller (e.g. mobile). The decision is done using Joe’s Agent stack.

However I think that this will be over ridden by a users browser settings on whether to autoplay videos or not. Is there a way to identify when video autoplay is off and hence serve the background slide show instead of showing the default (static) Video poster ?

Cheers

Dave

I guess not then!

Dave

I’m just kicking this up again in the vain hope someone has an idea! :slight_smile:

Dave

Technically there appears to be a solution to detect if autoplay is supported. Part of the “Modernizr JS” library (Modernizr tests which native CSS3 and HTML5 features are available).

Now I don’t know if it helps you much but you would include this javascript

You would use the following .on() syntax for your test for autplay on and off:

Modernizr.on('videoautoplay', function(result){
  if(result) {
    // Do what you want if autoplay here
  }  else {
      // Do what you want if NOT autoplay here
  }
});

That test will tell you if the browser supports autoplay. But it does not know if autoplay is enabled by the user.

Thanks @teefers and @joeworkman for your input. Sounds like I need to take a different design approach.

But thanks for your help - useful as ever!

Dave

No, it actually does return the proper autoplay has been disabled by the user. I have autoplay disabled on most of my browsers. I have tested this function and if takes the false route for Safari and Chrome, even though the browser Support autoplay.

I then ran the same test with Microsoft Edge( I did not turn off autoplay on that one and it shows autoplay OK.

It’s slow and I don’t know how reliable it is. but here’s a Codepen if you want to test it.
https://codepen.io/teefers/pen/VwZqbzN

That is not working for me. I enabled autoplay and it still says that its disabled… I am in Safari 13.

Yeah, I didn’t do any real thorough testing.

I wouldn’t use it myself, as I think it’s a lot of added page weight. But I’d never use video backgrounds for the same reason.

In some instances it is great - see:
https://adler-glasreinigung.de/

:slight_smile:

2 Likes

Jan,
That seems to work for my browsers.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.