html - 您如何为视频设置手机与桌面的 data-src
问题描述
查看此代码,我无法弄清楚该站点如何决定是从 Vimeo 加载视频的标清或高清版本。
<video
tabindex="-1"
role="presentation"
preload="auto"
data-src='{"phone": "https://player.vimeo.com/external/xxxxxx.sd.mp4?s=e178cfb40802c3a61da43abccebbe1f4d7460d48&profile_id=xxx", "desktop": "https://player.vimeo.com/external/xxxxxx.hd.mp4?s=70bf2b2131b71c32119a5e6f558077814bb1515b&profile_id=xxx"}'
autoplay
muted
loop
playsinline>
</video>
这段代码是依赖 JS 还是通过媒体查询在 CSS 中定义的?您如何实际确认此代码在移动设备上提供标清视频还是高清视频?
解决方案
我最终使用了这个使用媒体查询的代码。
<video preload autoplay loop muted playsinline>
<source src="https://player.vimeo.com/external/395038718.hd.mp4?s=a49ee0cfb60c92ecbb053c00de10305783207ab3&profile_id=174" media="only screen and (min-device-width: 568px)">
</source>
<source src="https://player.vimeo.com/external/395038718.sd.mp4?s=ef8b2e5d56817dddead406621420754eb510807f&profile_id=164" media="only screen and (max-device-width: 568px)">
</source>
</video>
推荐阅读
- java - 为什么会跳过 for 循环?
- unit-testing - 如何在 kotlin 的流单元测试中注册自定义模式?
- sql-server - MSSQL 事务复制不同版本
- amazon-web-services - 当 AWS Auto Scaling 组向外扩展哪个 ec2 实例被视为主实例时
- android - Glide 无法解析方法 'into(android.widget.TextView)'
- javascript - npx react-native init 错误在 appdata 文件夹中不包含 package.json 文件
- html - 媒体查询不响应
- python - Python:GridSearchCV 执行时间过长
- swift - “Roll”类型的表达式模式与“Requests.RawValue”(又名“Roll”)类型的值不匹配
- c++ - 获取最后执行的 return 语句的行