javascript - 根据浏览器加载特定的视频背景

Question

我有一个视频背景，效果很好 - 我指定了 3 种不同的格式，因此视频背景可以在不同的浏览器中使用，但是我的页面似乎同时加载了所有 3 个视频背景。这大大减慢了我的页面速度！

只是想知道有没有一种方法（使用 Javascript 或 jQuery）来检测浏览器并根据正在使用的浏览器仅加载 1 个视频背景？

<div class="header-unit">
<div id="video-container">
    <video autoplay loop muted class="fillWidth" id="bgvideo">
    <source src="backgroundvideo.mp4" type="video/mp4">
    <source src="backgroundvideo.ogv" type="application/ogg">
    <source src="backgroundvideo.webm" type="video/webm">
    </video>
</div>
</div>