How to use browser feature detection to control video attribute muted?

Question

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!

Answer 1

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