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

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>