0

I'm new to web-development. After researching I found that using user agent styles is unreliable for the website to last long term. I've never used feature detection before but was advised that it was the way to go. So could I get some help getting started? I just want to detect if the user's browser is safari and if it is, I want a particular video element to contain the attribute 'muted'. Essenetially I want video to autoplay in chrome with sound and in safari I wanted it to be muted and autoplay. Say the video element has id #catwalk. If this is a lot, could someone point me to simple guide to using feature detection for my particular use case? Thank you!

Laiqa Mohid
  • 461
  • 3
  • 14
  • look at https://kangax.github.io/compat-table/es6/ for a features only safari has or lacks (or a unique combination that identifies safari) – Jaromanda X Sep 14 '20 at 23:03
  • couldn't find video autoplay – Laiqa Mohid Sep 14 '20 at 23:20
  • huh? what? there's hundreds of js features to detect - you don't have to detect a feature directly related to whatever it is you're trying to do to detect a browser ... since both chrome and safari can autoplay, then autoplay isn't a particularly useful feature to detect – Jaromanda X Sep 14 '20 at 23:32
  • hmmm what do you suggest I do then? Ideally i'd like the video to play msuic and have autoplay but safari requires all video thats are going to autoplay to be muted. None of the other browsers have that – Laiqa Mohid Sep 14 '20 at 23:44
  • clearly i dont know anything and just require a noob guidance pls – Laiqa Mohid Sep 14 '20 at 23:45
  • The problem with feature detection is .... browsers have features added all the time - so you'd need to keep abreast of such additions – Jaromanda X Sep 15 '20 at 00:25

1 Answers1

0

Since Safari is the only (current) browser with proper tail calls, the following code should identify a safari browser (as I don't have any fruit based devices, I can't check the accuracy of this code)

var safari = (function() {
    try {
        return eval(`(function(){"use strict";return(function f(n){if(n<=0){return "foo";}return f(n - 1);}(1e6))==="foo";})()`);
    } catch(e) {
        return false;
    }
})();

Of course, the problem with feature detection is that features are added to browsers - so this may not always be useful

Jaromanda X
  • 53,868
  • 5
  • 73
  • 87