[英]HTML5 video with different files for responsive design
Is there a srcset
equivalent for HTML5 video? HTML5视频是否有等效的srcset
? At present I have a grid of videos on a page, 3 in a row, in 5 rows (so 15 videos in total) all like this: 目前,我在一个页面上有一个视频网格,连续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>
The issue I'm having is that my page request is up to about 6mb. 我遇到的问题是我的页面请求最大约为6mb。 As the grid of videos I have are 3 wide... 由于我的视频网格宽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>
...its pretty obvious that for a small device with a screen size of ~ 320px I don't need 3 400px video files, I could use smaller ones. ...很明显,对于屏幕大小约为320像素的小型设备,我不需要3 400像素的视频文件,我可以使用较小的文件。
I'm just about to start refactoring to load my page like this: 我将要开始重构以加载我的页面,如下所示:
<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>
And then use JavaScript to essentially say: 然后使用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">')
}
Is that a good option or is there a better way or a library that already exists? 这是一个好选择,还是有更好的方法或已经存在的库? After Googling a lot I haven't found very much helpful information. 经过大量的Google搜索之后,我没有找到太多有用的信息。
You can use an @media
query to apply a specific width, only when the screen's max-width
is 500px
: 仅当屏幕的max-width
为500px
时,才可以使用@media
查询来应用特定的宽度:
@media screen and (max-width:500px){
video { width:100% !important; }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.