Отзывчивый HTML5-видеотег, несколько запросов

Question

Я пытаюсь использовать носитель attribute в теге source в некотором html5 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 добавлением onload="videoSize()" к body тега. Из-за мое отсутствие знаний о том, как в использовании JSFiddle, я должен был загрузить его, используя их встроенную систему: http://jsfiddle.net/x8h5ebq6/2/

Я добавил id к видео тегу, но вы можете оставить, что, если вы поменять document.getElementById('video').innerHTML для document.getElementsByTagName('video')[0].innerHTML, [0], соответствующий экземпляру на странице тега video, на который вы хотите настроить сценарий. Это можно увидеть по адресу: http://jsfiddle.net/x8h5ebq6/1/