HTML5 видео с различными файлами для отзывчивого дизайна

Question

Есть ли эквивалент srcset для видео HTML5? В настоящее время у меня есть сетка видео на странице, 3 в ряд, в 5 строк (около 15 видео, в общей сложности) все, как это:

<video width="400" poster="14.jpg" loop="loop" autoplay="autoplay"> 
    <source src="14.webm" type="video/webm"> 
    <source src="14.mp4" type="video/mp4"> 
</video> 

Проблема у меня в том, что мой запрос странице до около 6 мб. Поскольку сетка видео, которые я в 3 широких ...

<div class="row"> 
    <video width="400" poster="13.jpg" loop="loop" autoplay="autoplay"> 
    <source src="13.webm" type="video/webm"> 
    <source src="13.mp4" type="video/mp4"> 
    </video> 
    <video width="400" poster="14.jpg" loop="loop" autoplay="autoplay"> 
    <source src="14.webm" type="video/webm"> 
    <source src="14.mp4" type="video/mp4"> 
    </video> 
    <video width="400" poster="15.jpg" loop="loop" autoplay="autoplay"> 
    <source src="15.webm" type="video/webm"> 
    <source src="15.mp4" type="video/mp4"> 
    </video> 
</div> 

... его довольно очевидно, что для небольшого устройства с размером экрана ~ 320px не нужны 3 400px видео файлов, я мог используйте более мелкие.

Я просто о том, чтобы начать рефакторинг, чтобы загрузить мою страницу, как это:

<div class="row"> 
    <video width="400" poster="13.jpg" loop="loop" autoplay="autoplay"> 
    </video> 
    <video width="400" poster="14.jpg" loop="loop" autoplay="autoplay"> 
    </video> 
    <video width="400" poster="15.jpg" loop="loop" autoplay="autoplay"> 
    </video> 
</div> 

И затем использовать JavaScript, чтобы по существу сказать:

if($(window).width() < 500){ 
    $('#video13').append('<source src="13-SMALL-FILE.mp4" type="video/mp4">') 
}else{ 
    $('#video13').append('<source src="13-LARGE-FILE.mp4" type="video/mp4">') 
} 

Это хороший вариант или есть лучший способ или библиотека, которая уже существует? После Googling много я не нашел очень полезную информацию.

Answer 1

я есть дать вопрос СМИ

@media screen and (max-width:500px){ 

видео:; }

{ширина 100% важно!}