swiper轮播嵌入视频

最新推荐文章于 2024-05-17 15:36:38 发布
最新推荐文章于 2024-05-17 15:36:38 发布
阅读量2.3k 收藏 8
点赞数 1
分类专栏： jquery swiper3 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40667613/article/details/125502087
版权

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>

秋宁去吃饭
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用swiper实现视频和图片混合轮播
Femi的博客欢迎大家
04-22 7027
完成需求：轮播页面自动滚动循环播放素材，在视频页面自动播放视频至视频结束后继续轮播下一个素材，手动切换时视频页暂停播放，切换回来后恢复播放。 1.安装swiper相关插件 2.在轮播页面引入 import{Swiper,SwiperSlide}from"vue-awesome-swiper"; import"swiper/swiper-bundle.css"; importSwiper2,{ Autoplay}from"swiper"; Swiper2.use([Na...
swiper视频轮播
七七的博客
11-29 328
swiper视频轮播
html Swiper 插件 视频轮播 轮播图
01-03
使用Swiper 插件实现 类似于轮播图的视频轮播 轮播图
使用swiper实现无限滚动
最新发布
weixin_55932347的博客
05-17 524
（使用 vue3-seamless-scroll 插件也是可以实现的，详细见。
swiper视频轮播 swiper4无缝轮播视频特效 swiper4无限轮播视频特效
Taurus_666
10-14 2769
swiper视频轮播 首先看效果图（快速播放了），主要功能包括左右按钮， 1、上一个和下一个视频缩小比例并添加蒙层。 2、可以按钮切换，点点切换，手滑动切换。 3、点击视频播放，切换视频，停止播放。 完整代码 完整代码见github ，如果是符合你想要的，欢迎点赞❤ ...
swiper3实现包含视频的轮播效果
木雷双雄7
10-24 9731
给需要添加视频的slide添加一个特有的类ban_video，来识别需要添加视频的slide。 因为我是动态添加video元素的，所以需要给slide添加视频的第一帧图片，避免加载视频带来的轮播空白问题，同时也为了撑开元素。 把视频相对定位，覆盖在图片的上面，实现图片到视频的无缝连接。 实现视频播放的逻辑： 通过判断当前slide（swiper-slide-active）是否包含ban_v...
swiper实现影院轮播效果
蒙悦纳的博客
08-20 509
首先看效果： 主要是使用在移动端，用的是Vue框架： <swiper :options="swiperOption" touch-action: none> <swiper-slide v-for="(item, i) in films" :key="i"> <div style="text-align:center" @click="changemovie(i)"> <van-image width="90" height="130" :
swiper 视频无限自动轮播 无缝轮播的实现
我本名叫一休的博客
04-10 1万+
本案例用的swiper-4.2.2.min.js 和 swiper-4.2.2.min.css&lt;div class="swiper-container" id="swiper2"&gt; &lt;div class="swiper-wrapper"&gt; &lt;#list videoList as video&gt;     &lt;div clas
vue中使用swiper轮播实时监控视频并利用video.js播放.m3u8格式监控视频
zhanglongle_的博客
01-10 1458
最近项目遇到一个需求，需要以轮播图的形式展示几个实时的监控视频，这就需要用到swiper和video.js，因为视频格式是m3u8格式的，所以原生video标签不支持。
记录Swiper+TCPlayer实现视频轮播效果
m0_68714404的博客
10-27 117
记录日常
关于swiper 里 图片视频混合后 自动轮播 方案
weixin_45379180的博客
02-09 1756
关于swiper 里 图片视频混合后 自动轮播 方案
视频+swiper.zip
03-17
该文件时配合swiper写的视频+图片轮播 可以在H5中和混合式开发的apicloud中使用当前的内容
vue3 - swiper插件 实现PC端的 视频滑动功能（仿抖音短视频）
weixin_42479421的博客
11-08 3067
使用swiper插件，实现pc端的视频滑动功能。
swiper中有视频时，滑动停止后视频停止播放
weixin_33795833的博客
06-01 3962
我们经常能够看到在图片轮播中，穿插着视频的播放，如下图为淘宝的一个产品轮播图，放个视频能够让顾客对产品有个更全面的认识。 我们可以用swiper实现这个功能。用法就跟放图片一样，只是这里把图片换成视频就可以了。 只是如果放的是视频的话，就有一个问题，就是我们怎么在滑动结束的时候，自动停止播放上一个视频呢？ 我们可以利用 swiper 提供的 onSlideChangeEnd (注意swiper ...
swiper播放视频，完成后自动切换下一张
qq_44161722的博客
12-13 723
我的思路是监听视频播放进度，如果播放完毕再开启swiper的自动轮播，因为我的需求是只有第一个swiper才是视频，后边的都是图片，那就需要轮播到第一个swiper的时候停止自动轮播，继续等待视频播放完毕再次开始自动轮播。// 如果当前播放时长小于总时长并且大于总时长秒数就开始自动轮播，这里之所以这么判断是因为duration 和currentTime 的小数位并不能保证完全一致，所以就根据当前播放时长的整数秒是否大于总时长的整数秒。// 判断当前swiper索引，如果是第一个就停止自动轮播。
swiper中插入video实现默认当前活动video进入页面自动播放
cp3___的博客
10-30 5082
写一篇关于自定义视频播放功能的播客 需求，pc端实现视频轮播，采用swiper+video实现，默认进入页面在页面加载完数据后，第一个视频自动播放 html部分 在当第一个视频上添加muted属性，默认为true,此属性在chrome上是静音，但是在其他浏览器可以正常播放， js部分 1.获取到当前swiper拥有swiper-slide-active 属性下的video 2....
uniapp实现swiper包含video的轮播图
x_duoduoluo的博客
09-20 4542
具体需求： 1.轮播图轮播功能。 2.同时存在视频video和图片image。 3.视频不点击播放时不播放，轮播图轮播；视频播放时轮播图不轮播，视频暂停时轮播图轮播。 代码如下： <template> <view class="content"> <view class="screen-swiper-box"> <swiper class="screen-swiper" indicator-dots="true" circular="true" :aut
swiper 自动播放
weixin_30788239的博客
10-12 1248
<script type="text/javascript"> $(function(){ var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, ...
H5页面中的视频轮播（类似于banner轮播图效果）
热门推荐
calm微笑
05-12 2万+
先说下我的需求，如下图： 手机模型中间部分是视频播放，当一条视频播放完毕后，整屏会自动上滑切换到下一个视频。提起轮播，我们看到的最多的就是banner轮播图，而提起轮播图，我会马上想起用Swiper。 一开始为了快速开发，就想着用swiper来实现切换视频的轮播效果，但是尝试后发现两个严重的问题：
vue使用swiper轮播切换页面和导航栏整合一起食用
09-08
您好！ 使用 vue 和 swiper 进行页面轮播和导航栏整合可以采用以下步骤： 1. 安装 swiper：使用 npm 安装 swiper，命令为：`npm install swiper`。 2. 在 vue 组件中引入 swiper：在 vue 组件的 script 标签中引入 swiper，代码如下： ``` import Swiper from 'swiper'; export default { name: 'YourComponent', mounted() { new Swiper('.swiper-container', { // Swiper 的配置项 }); } } ``` 3. 创建页面轮播：使用 swiper 组件创建轮播，在 vue 组件的 template 标签中添加如下代码： ``` <template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> </template> ``` 4. 创建导航栏：使用 vue 组件的 template 标签中添加如下代码： ``` <template> <div class="nav"> <div class="nav-item" v-for="item in navList" :key="item.id"> {{ item.title }} </div> </div> </template> ``` 5. 导航栏和页面轮播整合：使用 vue 组件的 template 标签中添加如下代码： ``` <template> <div> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> <div class="nav"> <div class="nav-item" v-for="item in navList" :key="item.id"> {{ item.title }} </div> </

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值