swiper轮播嵌入视频 - 个人学习记录

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

swiper

打开边栏(ESC) 关闭边栏(ESC)

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