gpt4 book ai didi

javascript - 用于响应式设计的具有不同文件的 HTML5 视频

转载 作者:行者123 更新时间:2023-12-03 07:16:09 26 4
gpt4 key购买 nike

有没有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>

我遇到的问题是我的页面请求高达大约 6mb。由于我拥有的视频网格是 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>

...很明显,对于屏幕尺寸约为 320 像素的小型设备,我不需要 3 400 像素的视频文件,我可以使用更小的视频文件。

我正要开始重构以像这样加载我的页面:
<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">')
}

这是一个好的选择还是有更好的方法或已经存在的库?在谷歌搜索了很多之后,我没有找到非常有用的信息。

最佳答案

您可以使用 @media查询应用特定宽度,仅当屏幕的 max-width500px :

@media screen and (max-width:500px){
video { width:100% !important; }
}

关于javascript - 用于响应式设计的具有不同文件的 HTML5 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40780216/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com