[英]How do you set data-src for phone vs. desktop for a video
查看此代碼,我無法弄清楚該站點如何決定是否從 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.