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

Question

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

video 标签使用 js 根据页面宽度选择适当的 poster。如果您想知道那里发生了什么。

我使用 CSS 使 video 标记流畅，但我试图为非桌面用户节省大量下载(基于页面宽度)。

我发现一些 media 属性可能不受支持，我想知道这是否就是 Chrome 中失败的原因，或者我是否做错了。或者，如果我应该尝试使用 javascript 来完成此操作并交换 source 标记中的 src 属性。

如果不支持 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，与您想要脚本的 video 标记页面上的实例相对应的 [0]达到目标。可以看到:http://jsfiddle.net/x8h5ebq6/1/