I have the following HTML code:
<video autoplay loop playsinline>
<source src="VIDEO-SRC-DESKTOP" type="VIDEO-TYPE" media="all and (min-width:1240px)">
<source src="VIDEO-SRC-MOBILE" type="VIDEO-TYPE">
</video>
In safari, if you open the respective URL directly, the correct source is shown. But the website is a single-page-application and if you navigate to a URL without page-reload and the video is rendered to the DOM after the initial pageload, it will always play the VIDEO-SRC-MOBILE.
For the SPA navigation I am using barbaJS. It probably also has to do with the fact that I have to actively call videoNode.play() after the page-transition as autoplay only seems to trigger on pageload as well.
Any ideas how to get safari to apply the media-query to the video-source? Or any other workaround known? I would like to avoid setting the src manually as the bug only applies to safari and it would also make the preloader-logic more complicated.