Javascript 响应性HTML5视频标签，多个查询

我试图在一些html5

视频
中使用
源
标记中的媒体
属性
。Firefox会在页面加载中加载三个大小正确的视频，但Chrome会在所有页面宽度上加载小视频。
如果看不到
media
属性，请在代码中向右滚动

video
标签使用
js
根据页面宽度选择合适的
poster
。以防你想知道那里发生了什么

我使用
CSS
使
video
标签流畅，但我正试图为非桌面用户节省大量下载（基于页面宽度）

我已经看到了一些东西，
媒体
属性可能不受支持，我想知道这是为什么在Chrome中失败，还是我做错了。或者我应该尝试使用javascript来完成这项工作，并在
source
标记中交换
src
属性

如果
media
属性不受支持，是否有人可以将我链接起来，或者如果你想贬低我，甚至可以发送一个LetmegoogleThat for you link

<video poster="" data-posterlarge="poster.jpg" data-postermedium="poster-medium.jpg" data-postersmall="poster-small.jpg" controls>         
  <source type="video/webm;codecs=&quot;vp8, vorbis&quot;" src="video-small.webm" media="all and (max-width:480px)"></source>
  <source type="video/mp4;codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="video-small.mp4" media="all and (max-width:480px)"></source>
  <source type="video/webm;codecs=&quot;vp8, vorbis&quot;" src="video-medium.webm" media="all and (min-width:480px) and (max-width:800px)"></source>
  <source type="video/mp4;codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="video-medium.mp4" media="all and (min-width:480px) and (max-width:800px)"></source> 
  <source type="video/webm;codecs=&quot;vp8, vorbis&quot;" src="video.webm"></source>
  <source type="video/mp4;codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="video.mp4"></source>
  <small>THIS BROWSER DOES NOT HAVE NATIVE VIDEO SUPPORT</small>
</video>


此浏览器不支持本机视频

谢谢
因为您的
源标记的内容都是相同的，除了大小之外，下面的代码只是合并并简化了显示内容

如果需要，我可以制作jQuery版本，但这里有一个纯JS解决方案：

function size() {
 var width = window.innerWidth, size = '', source;
 if(width <= 480)
  size = '-small';
 else if(width > 480 && width <= 800)
  size = '-medium';
 source = '<source type="video/webm;codecs=&quot;vp8, vorbis&quot;" src="video' + size + '.webm" media="all and (max-width:480px)"></source><source type="video/mp4;codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="video' + size + '.mp4" media="all"></source><small>THIS BROWSER DOES NOT HAVE NATIVE VIDEO SUPPORT</small>';
 document.getElementById('video').innerHTML = source;
}

通过将
onload=“videoSize（）”
添加到
body
标记中，可以将其称为onload。由于我缺乏如何使用JSFIDLE的知识，我不得不使用他们的内置系统加载它：

我在视频标记中添加了一个
id
，但是如果您将
document.getElementById（'video'）.innerHTML
替换为
document.getElementsByTagName（'video'）[0]。innerHTML
，与脚本要指向的
video
标记页面上的实例相对应的
[0]
，则可以取消该选项。可以在以下位置看到：
对，这是一种通过
js
实现的方法，但我想知道我是否必须基于我所看到的关于
媒体
属性的混合且过时的信息。我猜您从中获得了原始参考代码并对其进行了修改。问题是，
media
属性实际上不受任何主流浏览器的支持。即使他们中的一些人做到了，也有其他人做不到。此外，iOS不支持使用这种细分方法。基本上，如果您想确保它能够跨浏览器和平台工作，最好的选择是使用脚本。甚至那个页面也描述了
media
属性的问题，以及JavaScript和如何解决这个问题（例如jQuery方法）。很好的参考资料。事实上，我是从这里开始我的探索的：但那篇文章已经过时了，我正在寻找更多的最新信息。没有iOs支持会破坏交易
js
是的。很抱歉让您失望，但有些东西是一些浏览器开发人员无法接受的。我的参考文献几乎同样古老，但有几个额外的来源支持它仍然是正确的。我想你可能用过我的，因为文件名非常相似，但巧合发生了。^^'我很高兴能帮上忙。：）
<video poster="" data-posterlarge="poster.jpg" data-postermedium="poster-medium.jpg" data-postersmall="poster-small.jpg" controls id="video"></video>