Revolution Slider 5.4设备视频切换异常：移动端视频无法加载

问题根源 #

• 重复ID冲突：你创建了两个ID为rev_slider_8_1的滑块容器，HTML中ID必须唯一，浏览器只会渲染第一个滑块，移动端滑块完全被忽略。
• CSS类名不匹配：HTML中移动端视频层的类是mobilevid，但CSS里写的是.mobile，导致样式无法生效。
• 初始显示设置错误：两个滑块都默认display:none，没有默认显示桌面端滑块。

修正后的代码 #

HTML（修复ID冲突与初始显示） #

<div id="rev_slider_8_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="weone" data-source="gallery" style="background:transparent;padding:0px;">
    <!-- 桌面端滑块：默认显示 -->
    <div id="rev_slider_desktop" class="rev_slider fullscreenbanner fullvid" data-version="5.4.8.1">
        <ul>
            <li data-index="rs-36" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="300" data-rotate="0"  data-saveperformance="off"  data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
                <img src="res/img/slider.jpeg"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off" class="rev-slidebg" alt="slider-image" data-no-retina>
                <div class="rs-background-video-layer fullvid" 
                     data-forcerewind="on" 
                     data-volume="mute" 
                     data-videowidth="100%" 
                     data-videoheight="100vh" 
                     data-videomp4="res/video/slider-video.mp4" 
                     data-videopreload="auto" 
                     data-videoloop="loopandnoslidestop" 
                     data-forceCover="1" 
                     data-aspectratio="16:9" 
                     data-autoplay="true" 
                     data-autoplayonlyfirsttime="false"></div>
            </li>
        </ul>
    </div>

    <!-- 移动端滑块：默认隐藏 -->
    <div id="rev_slider_mobile" class="rev_slider fullscreenbanner mobilevid" style="display:none;" data-version="5.4.8.1">
        <ul>
            <li data-index="rs-36" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="300" data-rotate="0"  data-saveperformance="off"  data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
                <img src="res/img/slider.jpeg"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off" class="rev-slidebg" alt="slider-image" data-no-retina>
                <div class="rs-background-video-layer mobilevid" 
                     data-forcerewind="on" 
                     data-volume="mute" 
                     data-videowidth="100%" 
                     data-videoheight="100vh" 
                     data-videomp4="res/video/slider-video-mobile.mp4" 
                     data-videopreload="auto" 
                     data-videoloop="loopandnoslidestop" 
                     data-forceCover="1" 
                     data-aspectratio="16:9" 
                     data-autoplay="true" 
                     data-autoplayonlyfirsttime="false"></div>
            </li>
        </ul>
    </div>
</div>

CSS（修复类名匹配与显示逻辑） #

/* 移动端：隐藏桌面滑块，显示移动端滑块 */
@media screen and (max-width: 425px) {
  .rev_slider.fullvid {
    display: none;
  }
  .rev_slider.mobilevid {
    display: block;
  }
}

/* 桌面端默认隐藏移动端滑块 */
@media screen and (min-width: 426px) {
  .rev_slider.mobilevid {
    display: none;
  }
}

额外优化提示 #

• 建议给移动端视频设置适配的data-aspectratio（比如9:16），避免画面拉伸变形。
• 添加窗口 resize 监听，确保尺寸变化时滑块切换正常：

window.addEventListener('resize', function() {
    const desktopSlider = document.getElementById('rev_slider_desktop');
    const mobileSlider = document.getElementById('rev_slider_mobile');
    if (window.innerWidth <= 425) {
        desktopSlider.style.display = 'none';
        mobileSlider.style.display = 'block';
        // 重新初始化滑块（若Revolution Slider需要）
        if (typeof revapi !== 'undefined') revapi.revstart();
    } else {
        desktopSlider.style.display = 'block';
        mobileSlider.style.display = 'none';
        if (typeof revapi !== 'undefined') revapi.revstart();
    }
});

内容的提问来源于stack exchange，提问作者xif