我想知道在响应式网站上发布HTML5视频的最佳做法是什么。我将视频转换为MP4，WebM和OGG。文件大约50MB（或多或少）对桌面用户来说很好，但我担心手机上的文件。我不希望他们只是为了在我的网站上观看一些视频而获得天文数字。
首先我偶然发现了媒体查询，如下所述：http://www.iandevlin.com/blog/2012/08/html5/responsive-html5-video但是它们已从HTML5规范中删除。
我发现的下一件事是“DASH Streaming”https://developer.mozilla.org/en-US/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video但我觉得使用它并不舒服，特别是因为他们提供的最新演示https://github.com/Dash-Industry-Forum/dash.js/wiki - ＆gt; http://dashif.org/reference/players/javascript/1.2.0/index.html无法在我的浏览器（Firefox）中使用。
另一种可能性是用PHP跟踪用户年龄并决定我应该提供的视频的分辨率，但是用户来看，趋势一直在变化，例如有小屏幕的Android设备然后有具有全高清分辨率的平板电脑。
所以我目前最喜欢的是加载只有一个源（.mp4，Full HD）的元素，并使用Modernizer.js检测什么视频格式是suportet然后通过测量屏幕宽度决定分辨率（并改变它调整大小）。
但我仍然想知道是否有更好的方法。有任何想法吗？你们是怎么处理这个问题的？