如何根据观看者的屏幕分辨率调整视频来源？

Question

好的，对不起我是菜鸟。我会尝试具体。

这就是我对w3Schools的看法：

“注意：不要使用高度和宽度属性重新缩放视频！缩小具有高度和宽度属性的大型视频会强制用户下载原始视频（即使它在页面上看起来很小）。正确的方法在页面上使用之前，使用程序重新缩放视频。“

http://www.w3schools.com/tags/att_video_height.asp

所以，我不能像这样缩放视频：

@media (max-width: 1024px) {
#video{
  width:426; height:240;
};
}
@media (min-width: 1280px) {
#video{
  width:1280; height:720;
};
}

<video id='video' controls>
    <source src="Showreel.mp4" type="video/mp4">
</video>

我需要根据观看者的屏幕分辨率设置不同的视频大小（质量）。有人能指出我的方向吗？也许你知道一些线索; JQuery / pure JS / css /任何解决方案......