swiper 视频轮番

百度搜索：swiper 视频轮番

转载1：https://blog.csdn.net/Aimee1608/article/details/79637929

项目中使用swiper插件嵌套video标签

正常的swiper插件里面嵌套video标签，如下写法就够了,在ios 和PC端上完全没有问题，但是在安卓机上，播放视频后，视频的层级会居上，覆盖住下面的层，导致左右滑块被遮挡，并且滑动video标签也无法滑动。

<div class="swiper-container video-box">
   <div class="swiper-wrapper">
       <div class="swiper-slide" >
               <video class="video1"  controls="controls" src="video/bt03.mp4" poster="img/vbg01.png"  playsinline="true" webkit-playsinline="true"  preload="auto"></video>
       </div>
       <div class="swiper-slide" >
               <video class="video1"  controls="controls" src="video/bt02.mp4" poster="img/vbg02.png" playsinline="true" webkit-playsinline="true"  preload="auto"></video>
       </div>
    </div>
</div>

 

设置层级并不好使；改用在当前小窗口播放的方法，给video标签设置webkit-playsinline playsinline x5-playsinline属性，然而也不起作用。

最后考虑video暂停播放时，设置video的display 为hidden，滑动到下一个视频的时候，暂停播放当前的视频，显示视频的图片。

修改
html修改，添加播放的图片和播放按钮

<div class="swiper-container video-box">
        <div class="swiper-wrapper">
            <div class="swiper-slide" >
                    <video class="video1"  controls="controls" src="video/bt03.mp4" poster="img/vbg01.png"  playsinline="true" webkit-playsinline="true"  preload="auto"></video>
                <div class="posterBg" style="background-image: url(img/vbg01.png)">
                    <img src="img/btn-v_03.png"  alt=""/>
                </div>
            </div>
            <div class="swiper-slide" >

                    <video class="video1"  controls="controls" src="video/bt02.mp4" poster="img/vbg02.png" playsinline="true" webkit-playsinline="true"  preload="auto"></video>
                <div class="posterBg" style="background-image: url(img/vbg02.png)">
                    <img src="img/btn-v_03.png"  alt=""/>
                </div>
            </div>
            <div class="swiper-slide" >
                <video class="video1"  controls="controls" src="video/bt02.mp4" poster="img/vbg03.png" playsinline="true" webkit-playsinline="true"  preload="auto"></video>
                <div class="posterBg" style="background-image: url(img/vbg03.png)">
                    <img src="img/btn-v_03.png"  alt=""/>
                </div>

            </div>
            <div class="swiper-slide" >
                <video class="video1"  controls="controls" src="video/bt04.mp4" poster="img/vbg04.png" playsinline="true" webkit-playsinline="true"  preload="auto"></video>
                <div class="posterBg" style="background-image: url(img/vbg04.png)">
                    <img src="img/btn-v_03.png"  alt=""/>
                </div>

            </div>
            <div class="swiper-slide" >
                <video class="video1"  controls="controls" src="video/bt05.mp4" poster="img/vbg05.png" playsinline="true" webkit-playsinline="true" preload="auto"></video>
                <div class="posterBg" style="background-image: url(img/vbg05.png)">
                    <img src="img/btn-v_03.png"  alt=""/>
                </div>

            </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev sw-car-prev"></div>
        <div class="swiper-button-next sw-car-next"></div>
    </div>

添加监听播放暂停的逻辑，点击swiper-slide，隐藏播放的图片和按钮，显示当前video标签，正常播放。暂停播放时，隐藏video标签，显示播放的图片和按钮。 
这样就和ios一样正常播放啦。

var swipervideo = new Swiper('.video-box', {
        direction: 'horizontal',
        speed:500,
        autoplay:{
            delay:3000,
        },
        loop:true,
        pagination: {
            el: '.video-box .swiper-pagination',
            clickable: true,
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.video-box .sw-car-next',
            prevEl: '.video-box .sw-car-prev',
        },
        on: {
            init:function(){
                var videoBor = $(".video-box .swiper-slide");//video的swiper对象数组
                var videolist = videoBor.find("video");//video对象数组
                videoBor.on("click",function(){
                    swipervideo.autoplay.stop();
                    var $video = $(this).find("video")[0];
                    if($video.paused){
                        var videoPoster =$(this).find(".posterBg");//当前封面对象
                        videoPoster.hide();
                        $video.play();
                    }
                });
                videolist.on("pause",function(){
                    /*所有封面浮层show&所有视频hide*/
                    videoBor.find(".posterBg").show();
                    videoBor.find("video").hide();
                });

                videolist.on("play",function(){
                    /*当前视频show*/
                    $(this).show();
                    if($(this)[0].play){
                        swipervideo.autoplay.stop();
                    }
                });
            },
            slideChange: function(){
                var videolist = $(".video-box .swiper-slide").find("video");//video对象数组
                for(var k = 0 ;k<videolist.length;k++){
                    videolist[k].pause();
                }
            }
        }
    });

 

转载2：https://blog.csdn.net/hhf235678/article/details/80390758

在swiper插件中放置使用videojs插件的视频

由于要使用videojs插件，所以需要引入video.js和css文件（自己从网上找）

  1. swiper轮播图的布局可以根据自己的喜好来排布。
  2. 当视频播放时停止轮播。播放完毕时开始轮播。

html:

<div class="last-swiper-container" id="last_page">
            <div class="swiper-wrapper">
                <div class="swiper-slide pic-slide slide1 last_slider">
                    <video id="my_video_1" class="playVideo playVideo1 video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" 
                    data-setup='{}' width="100%" poster="img/Lingshan.png">
                        <source src="视频链接">
                    </video>
                </div>
                <div class="swiper-slide pic-slide slide2 last_slider">
                    <video id="my_video_2" class="playVideo playVideo2 video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" 
                    data-setup='{}' width="100%" poster="img/xh.png">
                        <source src="视频链接">  
                    </video>
                </div>
                <div class="swiper-slide pic-slide slide3 last_slider">
                    <video id="my_video_3" class="playVideo playVideo3 video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"   
                    data-setup='{}' width="100%" poster="img/factory.png">
                        <source src="视频链接">  
                    </video>
                </div>
                <div class="swiper-slide pic-slide slide4 last_slider">
                    <video id="my_video_4" class="playVideo playVideo4 video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"   
                    data-setup='{}' width="100%" poster="img/wisdom.png">
                        <source src="视频链接">  
                    </video>
                </div>
                <div class="swiper-slide pic-slide slide5 last_slider">
                    <video id="my_video_5" class="playVideo playVideo5 video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" 
                    data-setup='{}' width="100%" poster="img/Tianjin.png">
                        <source src="视频链接">  
                    </video>
                </div>
                <div class="swiper-slide pic-slide slide6 ">
                    <video id="my_video_6" class="playVideo playVideo6 video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"   
                    data-setup='{}' width="100%" poster="img/rose.png">
                        <source src="视频链接">  
                    </video>
                </div>
            </div>
            <div class="swiper-button last-swiper-button-next">
                <img src="图片链接">
            </div>
            <div class="swiper-button last-swiper-button-prev">
                <img src="图片链接">
            </div>
            <div class="swiper_pagination last-swiper-pagination"></div>
        </div>

css:

#last_page{
    height: 70%;
    position: relative;
    bottom: -10%;
    margin: 40px auto;
    padding-bottom: 45px;
    // width: 100%;
    .swiper-slide.pic-slide{
        width: 50%;
        overflow: hidden;
        // display: table-cell;
        text-align: center;
    }
    .pic-slide > img{
        width: 100%;
        vertical-align: middle;
    }
    .swiper_pagination{
        display: inline-block;
        position: absolute;
        bottom: 0px;
        left: 50%;
        margin-left: -60px;
    }
    .swiper-button{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 4%;
        z-index: 20;
        margin-top: -1%;
        padding: 50px;
        img{
            width: 25%;
            display: block;
        }
    }
    .last-swiper-button-next{
        right:14%;
    }
    .last-swiper-button-prev{
        left: 17%;
    }
    .pic-slide .playBtn{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -4%;
        margin-top: -4%;
        z-index: 100;
        width: 8%;
        cursor: pointer;
    }
}
.last_slider{
    min-height: 300px;
}
.playVideo{
    min-height: 300px;
}
#last_page_con{
    padding-top: 60px;
    .last_top{
        width: 100%;
        text-align: center;
        margin: 0 auto;
        .last_tit{
            font-size: 34px;
            margin-bottom: 14px;
            font-weight: lighter;
            color: #333333;
        }
        .last_line{
            width: 44px;
            height: 1px;
            border-bottom: 2px solid #999;
            display: inline-block;
            text-align: center;
        }
        .last_desc{
            height: 78px;
            margin-top: 14px;
            font-size: 16px;
            width: 50%;
            margin: 14px auto 0;
            padding: 0px 5px;
            line-height: 26px;
            color: #666;
            text-align: center;
            font-weight: lighter;
        }
    }
}
.last-swiper-container .playVideo{
    width: 100%;
}
.videoCon .vjs-poster{
    background: none;
}
.video-js{
    width: 100%;
}
.video-js .vjs-control-bar .vjs-volume-panel{
    display: none;
    opacity: 0;
}
.playVideo .video-js .vjs-big-play-button{
    display: none;
}
.video-js .vjs-control-bar .vjs-play-control{
    margin-top: 2px;
}
.video-js .vjs-control-bar .vjs-fullscreen-control{
    margin-top: 3px;
}

.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
}

.swiper-slide .video-js .vjs-big-play-button{
    font-size: 2.5em;
    line-height: 2.5em;
    height: 2.5em;
    width: 2.5em;
    -webkit-border-radius: 2.5em;
    -moz-border-radius: 2.5em;
    border-radius: 2.5em;
    background-color: #73859f;
    background-color: rgba(115,133,159,.5);
    border-width: 0.09em;
    margin-top: -1.25em;
    margin-left: -1.75em;
}
/* 中间的播放箭头 */
.swiper-slide .vjs-big-play-button .vjs-icon-placeholder {
    font-size: 1.63em;
}
/* 加载圆圈 */
.swiper-slide .vjs-loading-spinner {
    font-size: 2.5em;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    margin-top: -1em;
    margin-left: -1.5em;
}

js：

window.onload = function () {
    // 获取轮播图片的宽度从而计算高度，
    var lastWidth = $('#last_page .swiper-wrapper').width();
    var swiperWidth = lastWidth * 0.5;
    $('#last_page_con .swiper-slide').css('width',swiperWidth);
    var swiperHeight = swiperWidth*9/16;

    $(window).resize(function(){
        lastWidth = $('#last_page .swiper-wrapper').width()
        swiperWidth = lastWidth/2
        swiperHeight = swiperWidth*9/16
        $('.playVideo').css('height',swiperHeight)
        $('#last_page .swiper-slide').css('height',swiperHeight)
    })
    $('.playVideo').css('height',swiperHeight)
    $('#last_page .swiper-slide').css('height',swiperHeight)

    $('.videoCon .vjs-big-play-button').css('display','none');
    var $lastSwiper = new Swiper('.last-swiper-container',{
        pagination : '.last-swiper-pagination',
        autoplay: 2000,
        autoplayDisableOnInteraction: false,
        paginationClickable :true,
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: '7.5%',
        loop: true,
        nextButton: '.last-swiper-button-next',
        prevButton: '.last-swiper-button-prev',
        onSlideChangeEnd : function(e) {
            if (e.activeIndex === 6 || e.activeIndex === 12) {
                $('.last_desc').text('每一个轮播图所对应的文字');
                e.slideTo(6,0,false);
                e.startAutoplay();
                $click = 0;
            } else if (e.activeIndex === 7) {
                $('.last_desc').text('每一个轮播图所对应的文字')
                $click = 1;
            } else if (e.activeIndex === 8) {
                $('.last_desc').text('每一个轮播图所对应的文字')
                $click = 2;
            } else if (e.activeIndex === 9) {
                $('.last_desc').text('每一个轮播图所对应的文字')
                $click = 3;
            } else if (e.activeIndex === 10) {
                $('.last_desc').text('每一个轮播图所对应的文字')
                $click = 4;
            } else if (e.activeIndex === 5 || e.activeIndex === 11) {
                $('.last_desc').text('每一个轮播图所对应的文字')
                e.slideTo(11,0,false);
                e.startAutoplay();
                $click = 5;
            } 
            videojs("my_video_1").pause();
            videojs("my_video_1").currentTime(0);
            videojs("my_video_2").pause();
            videojs("my_video_2").currentTime(0);
            videojs("my_video_3").pause();
            videojs("my_video_3").currentTime(0);
            videojs("my_video_4").pause();
            videojs("my_video_4").currentTime(0);
            videojs("my_video_5").pause();
            videojs("my_video_5").currentTime(0);
            videojs("my_video_6").pause();
            videojs("my_video_6").currentTime(0);
        }
    })
    $('#last_page').mouseenter(function(){
        $lastSwiper.stopAutoplay();
    })
    videojs("my_video_1").on('play',function(){
        $click = 0;
        $lastSwiper.stopAutoplay();
    });
    videojs("my_video_2").on('play',function(){
        $click = 1;
        $lastSwiper.stopAutoplay();
    });
    videojs("my_video_3").on('play',function(){
        $click = 2;
        $lastSwiper.stopAutoplay();
    });
    videojs("my_video_4").on('play',function(){
        $click = 3;
        $lastSwiper.stopAutoplay();
    });
    videojs("my_video_5").on('play',function(){
        $click = 4;
        $lastSwiper.stopAutoplay();
    });
    videojs("my_video_6").on('play',function(){
        $click = 5;
        $lastSwiper.stopAutoplay();
    });
    var videoPanelMenu = $(".vjs-fullscreen-control");  
    videoPanelMenu.before('<div class="vjs-subs-caps-button  vjs-menu-button vjs-menu-button-popup vjs-control vjs-button"  aria-live="polite" aria-expanded="false" aria-haspopup="true">'  
      + '<div class="vjs-menu" role="presentation">'  
      + '<ul class="vjs-menu-content" role="menu">'  
      + '<li class="vjs-menu-item vjs-menu-item2" tabindex="-1" role="menuitemcheckbox">高清  1080P</li>'
      + '<li class="vjs-menu-item vjs-menu-item1" tabindex="-1" role="menuitemcheckbox">标清  720P</li>'  
      + '</ul></div>'
      +'  <button class="vjs-subs-caps-button vjs-control vjs-button" id="change_btn" type="button" aria-live="polite" title="清晰度切换" aria-disabled="false">'
      +'标清</button>'
      +'</div>'
    );

    var obj={tag:false,ctime:0};  
    window.obj=obj;
    $('.vjs-menu-item1').click(function(){
        changeVideo(1);
    })
    $('.vjs-menu-item2').click(function(){
        changeVideo(2);
    })

    videojs("my_video_1").on("timeupdate", function(){
        var myVideo = "my_video_1"
        timeChange(myVideo);
    });

    videojs("my_video_1").on('ended',function(){
        var myVideo = "my_video_1"
        $lastSwiper.startAutoplay();
        console.log('start');
        videoEnd(myVideo);
    })
    videojs("my_video_2").on("timeupdate", function(){
        var myVideo = "my_video_2"
        timeChange(myVideo);
    });

    videojs("my_video_2").on('ended',function(){
        var myVideo = "my_video_2"
        $lastSwiper.startAutoplay();
        console.log('start');
        videoEnd(myVideo);
    })

    videojs("my_video_3").on("timeupdate", function(){
        var myVideo = "my_video_3"
        timeChange(myVideo);
    });

    videojs("my_video_3").on('ended',function(){
        var myVideo = "my_video_3"
        $lastSwiper.startAutoplay();
        console.log('start');
        videoEnd(myVideo);
    })

    videojs("my_video_4").on("timeupdate", function(){
        var myVideo = "my_video_4"
        timeChange(myVideo);
    });
    videojs("my_video_4").on('ended',function(){
        var myVideo = "my_video_4"
        $lastSwiper.startAutoplay();
        console.log('start');
        videoEnd(myVideo);
    })

    videojs("my_video_5").on("timeupdate", function(){
        var myVideo = "my_video_5"
        timeChange(myVideo);
    });
    videojs("my_video_5").on('ended',function(){
        var myVideo = "my_video_5"
        $lastSwiper.startAutoplay();
        console.log('start');
        videoEnd(myVideo);
    })

    videojs("my_video_6").on("timeupdate", function(){
        var myVideo = "my_video_6"
        timeChange(myVideo);
    });
    videojs("my_video_6").on('ended',function(){
        var myVideo = "my_video_6"
        $lastSwiper.startAutoplay();
        console.log('start');
        videoEnd(myVideo);
    })
    $('.H3_play_btn').click(function(){
        $click = -1;
    })
    function styleFormat(num){
        num = num + 1;
        var playDoc = '.playBtn' + num;
        var swiperImgDoc = '.swiperImg' + num;
        var videoConDoc = '.videoCon' + num;
        $(playDoc).css('display','none');
        $(swiperImgDoc).css('display','none');
        $(videoConDoc).css('display','block');
    }


    function changeVideo(type){
        var my_video = "my_video_" + ($click+1);
        var slide = '.slide' + ($click + 1);
        var change_btn = slide + " #change_btn";
        var ctime=videojs(my_video).currentTime();
        if(type==1){
            if ($click === 0) {
                videojs(my_video).src([{src: "视频连接" }]);
            } else if ($click === 1) {
                videojs(my_video).src([{src: "视频连接" }]);
            } else if ($click === 2) {
                videojs(my_video).src([{src: "视频连接" }]);
            } else if ($click === 3) {
                videojs(my_video).src([{src: "视频连接" }]);
            } else if ($click === 4) {
                videojs(my_video).src([{src: "视频连接" }]);
            } else if ($click === 5) {
                videojs(my_video).src([{src: "视频连接" }]);
            }
            $(change_btn).html('标清');
            videojs(my_video).play();
        }
        if(type==2){
            if ($click === 0) {
                videojs(my_video).src([{src: "视频连接" }]);
            } else if ($click === 1) {
                videojs(my_video).src([{src: "视频连接" }]);
            } else if ($click === 2) {
                videojs(my_video).src([{src: "视频连接" }]);
            } else if ($click === 3) {
                videojs(my_video).src([{src: "视频连接" }]);
            } else if ($click === 4) {
                videojs(my_video).src([{src: "视频连接" }]);
            } else if ($click === 5) {
                videojs(my_video).src([{src: "视频连接" }]);
            }
            $(change_btn).html('高清');
            videojs(my_video).play();
        }
        window.obj.ctime=ctime;  
        window.obj.tag=true;
    }


    function timeChange (myVideo) {
        if(window.obj.tag){
            videojs(myVideo).currentTime(window.obj.ctime)
            videojs(myVideo).play();
            window.obj.tag=false;
        }
    }

    function videoEnd (myVideo) {
        var videoCon = ".videoCon" + ($click + 1);
        var play_control = videoCon + " .vjs-play-control";
        var control_text = videoCon + " .vjs-control-text";
    }
}

 

posted @ 2019-01-09 22:32  jiangxiaobo  阅读(4348)  评论(0)  编辑  收藏  举报