Question

我正在尝试使用某些html5 attribute中source标记中的媒体video。 Firefox会在页面加载时加载每个正确的三个大小的视频，但Chrome会在所有页面宽度上加载小视频。 如果看不到media属性，请滚动到代码右侧。

video代码使用js根据页面宽度选择合适的poster。万一你想知道那里发生了什么。

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

我已经看到了media属性可能不受支持的一些事情，并且想知道这是否是为什么这在Chrome中失败或者我做错了。或者，如果我应该尝试使用javascript完成此操作并替换src标记中的source属性。

如果不支持media属性，有人可以链接我，甚至可以发送LetMeGoogleThatForYou链接，如果你想谦虚我。

<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>

由于

Answer 1

由于您source标签的内容全部相同（大小除外），因此下面的代码只会合并并简化显示的内容。

如果您需要，我可以制作一个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;
}

然后，从video标记中删除所有代码，因此body中的所有内容都是：

<video poster="" data-posterlarge="poster.jpg" data-postermedium="poster-medium.jpg" data-postersmall="poster-small.jpg" controls id="video"></video>

您可以通过将onload="videoSize()"添加到body标记来将其称为onload。由于我对如何使用JSFiddle缺乏了解，我不得不使用他们的内置系统加载它：http://jsfiddle.net/x8h5ebq6/2/

我在视频广告代码中添加了id，但如果您为document.getElementById('video').innerHTML交换document.getElementsByTagName('video')[0].innerHTML，与页面上的实例对应的[0]，则可以将其关闭您想要脚本定位的video标记。可以在http://jsfiddle.net/x8h5ebq6/1/

看到

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

1 个答案: