自適應HTML5視頻代碼，多個查詢

Question

我正在嘗試在html5 video的source標簽中使用media 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>

您可以通過在body標簽上添加onload="videoSize()"來將其稱為onload。 由於缺乏有關如何使用JSFiddle的知識，我不得不使用其內置系統來加載它： http : //jsfiddle.net/x8h5ebq6/2/

我在視頻標簽中添加了一個id ，但是如果您將document.getElementById('video').innerHTML交換為document.getElementsByTagName('video')[0].innerHTML ，則對應的[0]您要腳本定位的video標簽頁面上的實例。 可以在以下位置看到它： http : //jsfiddle.net/x8h5ebq6/1/