滑块视频无法在移动设备上运行

时间:2016-08-17 07:15:06

标签: html5 video slider

您好,请您帮助我,为什么每当我查看我的网站时,第一个滑块是video.mp4没有加载,但是当我在浏览器上运行它时,它正常工作。请提前帮助谢谢

<section id="slider" class="slider-parallax revslider-wrap clearfix">
    <div class="slider-parallax-inner">

        <div class="tp-banner-container rev_slider_wrapper fullscreen-container">
            <div class="tp-banner" >
                <ul>    <!-- SLIDE  -->

                <li data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="images/slider/rev/main/1.jpg"  data-saveperformance="off"  data-title="" >
                        <!-- MAIN IMAGE images/slider/rev/main/upc1a.jpg -->
                    <img src="images/slider/rev/main/1.jpg"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>

                        <!-- LAYER NR. 1 -->
                        <div class="tp-fade fadeout fullscreenvideo rs-background-video-layer"
                            data-forcerewind="on"
                            data-volume="mute"
                            data-videowidth="100%"
                            data-videoheight="100%"
                            data-videomp4="images/ec.mp4"
                            data-videopreload="preload"
                            data-videoloop="none"
                            data-forceCover="1"
                            data-aspectratio="16:9"
                            data-autoplay="true"
                            data-autoplayonlyfirsttime="false"
                            data-nextslideatend="true"
                            >
                        </div>


                </li>
                <li class="tp-fade fadeout" data-transition="fade" data-slotamount="1" data-masterspeed="1500" data-thumb="images/slider/rev/main/2.jpg" data-delay="300" data-saveperformance="off" data-title="">
                    <!--Main Image-->
                    <img src="images/slider/rev/main/2.jpg"  alt="kenburns6"  data-bgposition="right center" data-kenburns="on" data-duration="3000" data-delay="3000" data-ease="Linear.easeNone" >
                </li>

                <li class="tp-fade fadeout" data-transition="slideup" data-slotamount="1" data-masterspeed="1500" data-thumb="images/slider/rev/main/3.jpg" data-delay="3000" data-saveperformance="off" data-title="">
                    <!--Main Image-->
                    <img src="images/slider/rev/main/3.jpg"  alt="kenburns6"  data-bgposition="right center" data-kenburns="on" data-duration="3000" data-delay="3000" data-ease="Linear.easeNone" >
                </li>

                <li class="tp-fade fadeout" data-transition="fade" data-slotamount="1" data-masterspeed="1500" data-thumb="images/slider/rev/main/4.jpg" data-delay="300" data-saveperformance="off" data-title="">
                    <!--Main Image-->
                    <img src="images/slider/rev/main/4.jpg"  alt="kenburns6"  data-bgposition="right center" data-kenburns="on" data-duration="3000" data-delay="3000" data-ease="Linear.easeNone" >
                </li>

                <li class="tp-fade fadeout" data-transition="slideup" data-slotamount="1" data-masterspeed="1500" data-thumb="images/slider/rev/main/5.jpg" data-delay="5000"  data-saveperformance="off"  data-title="">
                        <!-- MAIN IMAGE  time dalay last edited 11000-->
                        <img src="images/slider/rev/main/5.jpg"  alt="kenburns6"  data-bgposition="left top" data-kenburns="on" data-duration="5000" ata-delay="5000" data-ease="Linear.easeNone" >
                        <!-- LAYERS --> 
                        <a href="#" data-scrollto="#section-about" class="one-page-arrow dark">
                            <i class="icon-angle-down infinite animated fadeInDown"></i>
                        </a>
                </li>
                </ul>

            </div>

        </div>
        <!--<a href="#" data-scrollto="#section-about" data-easing="easeInOutExpo" data-speed="1250" data-offset="65" class="one-page-arrow dark"><i class="icon-angle-down infinite animated fadeInDown"></i></a>-->
    </div>


</section>

1 个答案:

答案 0 :(得分:0)

如果您的意思是没有超出范围,那么大多数移动设备都不支持自动播放代码,以避免用户在大量数据使用费用上运行。

海报标签确实有效,因此一种常见的方法是确保为视频设置海报,以便在移动设备上显示。