您如何为视频设置手机与桌面的 data-src答案

【问题标题】：How do you set data-src for phone vs. desktop for a video您如何为视频设置手机与桌面的 data-src
【发布时间】：2020-03-10 07:48:43
【问题描述】：

查看此代码，我无法弄清楚该网站如何决定是从 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 中定义的？您如何实际确认此代码是在移动设备上提供标清视频还是高清视频？

【问题讨论】：

标签： html video media-queries vimeo

【解决方案1】：

我最终使用了这段代码，它利用了媒体查询。

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

【讨论】：