swiper轮播嵌入视频 - 个人网站建设,php网站,网站维护,病毒查杀,网站编辑,网站改版,html制作-淘淘IT

swiper轮播嵌入视频：
效果：正常swiper自动播放；子元素swiper-slide有个别带有视频，并且默认初始化为不播放状态。

效果1：在视频未播放状态，用户点击视频，视频会进行播放；此时，swiper会停止自动轮播；
效果2：在视频播放状态，用户点击视频，视频会进行停止播放；此时，swiper会自动轮播并切换到下一屏；
效果3：视频播放结束，轮播会重新开始自动轮播；

前置条件：

引入swiper3和jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge, chrome=1" http-equiv="x-ua-compatible">
    <meta content="webkit" name="renderer">
    <meta content="telephone=no" name="format-detection">
    <meta content="initial-dpr=1" name="hotcss">
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
    <link href="css/swiper.min.css" rel="stylesheet" type="text/css">
    <!--Jquery-->
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <!--basic-->
    <script src="js/swiper.min.js" type="text/javascript"></script>
</head>
<style>
 
.video-section {}
.video-section .videoContent {
    display: none;
}
.video-section .video-details {
    padding: 10px;
    background: #FFFFFF;
    border-radius: 5px;
    box-sizing: border-box;
}
.video-section .video {
}
.video-section .poster {
    position: relative;
    display: block;
    width: 100%;
}
.video-section .poster:after {
    content: '';
    transition: all .3s;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000000;
    opacity: .4;
    z-index: 1;
}
 
.video-section .poster .video-bg {
    display: block;
}
.video-section .poster:hover .icon-play {
    opacity: .5;
}
.video-section .icon-play {
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    z-index: 2;
    width: 50px;
    height: 50px;
    transition: all .3s;
    opacity: 1;
}
</style>
<body>
<main class="container">
    <!-- S 视频 section-->
    <section class="video-section index-section section" id="video-section">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="video">
                        <a class="poster">
                            <img class="video-bg" src="images/Community-media4_03.png" width="100%"/>
                            <div class="icon-play">
                                <img src="images/icon-play.png" width="100%"/>
                            </div>
                        </a>
                        <video class="videoContent" controls poster="images/Community-media4_03.png" width="100%">
                            <source src="images/movie.mp4" type="video/mp4" width="100%"/>
                        </video>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="video">
                        <a class="poster">
                            <img class="video-bg" src="images/Community-media4_03.png" width="100%"/>
                            <div class="icon-play">
                                <img src="images/icon-play.png" width="100%"/>
                            </div>
                        </a>
                        <video class="videoContent" controls poster="images/Community-media4_03.png" width="100%">
                            <source src="images/movie.mp4" type="video/mp4" width="100%"/>
                        </video>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </section>
    <!-- E 视频 section-->
</main>
</body>
<script>
    $(function () {
 
        // S 视频 video-section
 
        // 第2屏轮播
        var videoSection = new Swiper('#video-section .swiper-container', {
            autoplay: 8000,
            speed: 800,
            loop: true,
            observer: true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents: true,
            autoplayDisableOnInteraction: false,
            pagination: '#video-section .swiper-pagination',
            paginationClickable: true,
        });
        videoSection.on('SlideChangeStart',function () {
            $('.videoContent').hide();
            $('.poster').show();
            $('.video video')[0].pause();
            videoSection.startAutoplay();
            // alert(swiper.activeIndex) //切换结束时，告诉我现在是第几个slide
 
        })
        $('.video').on('click', function () {
            if ($(this).children('.videoContent').is(':hidden')) {
                $(this).children('.videoContent').show();
                $(this).children('video')[0].play()
                $(this).children('.poster').hide();
                videoSection.stopAutoplay();
            } else {
                $(this).children('.videoContent').hide();
                $(this).children('.poster').show();
                $(this).children('video')[0].pause()
                videoSection.startAutoplay();
                setTimeout(()=>{
                    videoSection.slideNext();
                },500)
            }
        })
        // 监听视频播放
        $('.video video').on('ended', function () {
            $('.video  .videoContent').hide();
            $('.video .poster').show();
            videoSection.startAutoplay();
            videoSection.slideNext();
        })
        // E 视频
    })
</script>
</html>

赏

前一篇

谷歌chrome浏览器更改下载保存位置

后一篇

“最难不过坚持”

本人承接扒站仿站，php网站维护，病毒查杀，网站编辑，网站改版，html制作

谷歌chrome浏览器更改下载保存位置

网站两个域名，一个正常加载css，一个加载不出来，返回404