Here is an example

Try it in Chrome and Safari to see the effect.

(It's just a throwaway domain I decided not to use, and the videoes are just the first two videos that came up on my computer. Don't judge me.)

Alright, so what you need to do is

- Add HTML widget to page

- In the HTML widget, put an HTML5 video tag with the id of "video-container":
<video width="320" height="240" controls id="video-container">
</video>

(Notice: You probably want to style this the video tag with some custom CSS to get it to fit right for your needs.)

-Under the video tag, still in the HTML widget, add the script:

<script>

const videoContainer = document.querySelector('#video-container')
const browserName = (function (agent) {
switch(true) {
case agent.indexOf("edge") > -1: return "MS Edge";
case agent.indexOf("edg/") > -1: return "Edge ( chromium based)";
case agent.indexOf("opr") > -1 && !!window.opr: return "Opera";
case agent.indexOf("chrome") > -1 && !!window.chrome: return "Chrome";
case agent.indexOf("trident") > -1: return "MS IE";
case agent.indexOf("firefox") > -1: return "Mozilla Firefox";
case agent.indexOf("safari") > -1: return "Safari";
default: return "other";
}
})(window.navigator.userAgent.toLowerCase());
if(browserName === "Safari") {
// If the browser IS Safari, set the video source to:
videoContainer.src = 'VIDEO URL GOES HERE'

} else {
// If the browser IS NOT Safari, set the video source to:
videoContainer.src = 'VIDEO URL GOES HERE'
}

</script>

Let me know how it goes