Firefox/Chrome defaulting to MP4 video rather than WEBM

I have 2 versions of the same video in MP4 and WEBM format. Both work perfectly fine as tried them separately, in Safari (for just MP4) and Firefox/Chrome (for both formats). However when I combine them into the 1 shortcode, the HTML source shows both formats there, but in Firefox/Chrome, it still defaults to the MP4 version rather than playing the WEBM version.

Am I doing something wrong?

Shortcode:
[video width="350" webm="https://localhost:8888/wordpress/wp-content/uploads/2016/05/Test.webm" mp4="https://localhost:8888/wordpress/wp-content/uploads/2016/05/Test.mp4"][/video]

HTML Inspect Element (Firefox/Chrome) [auto-generated]:

<video src="https://localhost:8888/wordpress/wp-content/uploads/2016/05/Test.mp4?_=1" style="width: 100%; height: 100%;" class="wp-video-shortcode" id="video-30-1" preload="metadata" height="622" width="350">
	<source type="video/mp4" src="https://localhost:8888/wordpress/wp-content/uploads/2016/05/Test.mp4?_=1">
	<source type="video/webm" src="https://localhost:8888/wordpress/wp-content/uploads/2016/05/Test.webm?_=1">
	<a href="https://localhost:8888/wordpress/wp-content/uploads/2016/05/Test.mp4">https://localhost:8888/wordpress/wp-content/uploads/2016/05/Test.mp4</a>
</video>

Hope you can help! Any more info required please let me know and I’ll get back ASAP