• swiper轮播嵌入视频

    swiper轮播嵌入视频：

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

    效果1：在视频未播放状态，用户点击视频，视频会进行播放；此时，swiper会停止自动轮播；

    效果2：在视频播放状态，用户点击视频，视频会进行停止播放；此时，swiper会自动轮播并切换到下一屏；

    效果3：视频播放结束，轮播会重新开始自动轮播；

    前置条件：

    引入swiper3和jquery

     

    效果演示：

    代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta content="IE=edge, chrome=1" http-equiv="x-ua-compatible">
    6.     <meta content="webkit" name="renderer">
    7.     <meta content="telephone=no" name="format-detection">
    8.     <meta content="initial-dpr=1" name="hotcss">
    9.     <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
    10.     <link href="css/swiper.min.css" rel="stylesheet" type="text/css">
    11.     <!--Jquery-->
    12.     <script src="js/jquery.min.js" type="text/javascript"></script>
    13.     <!--basic-->
    14.     <script src="js/swiper.min.js" type="text/javascript"></script>
    15. </head>
    16. <style>
    17.  
    18. .video-section {}
    19. .video-section .videoContent {
    20.     display: none;
    21. }
    22. .video-section .video-details {
    23.     padding: 10px;
    24.     background: #FFFFFF;
    25.     border-radius: 5px;
    26.     box-sizing: border-box;
    27. }
    28. .video-section .video {
    29. }
    30. .video-section .poster {
    31.     position: relative;
    32.     display: block;
    33.     width: 100%;
    34. }
    35. .video-section .poster:after {
    36.     content: '';
    37.     transition: all .3s;
    38.     width: 100%;
    39.     height: 100%;
    40.     position: absolute;
    41.     top: 0;
    42.     left: 0;
    43.     background: #000000;
    44.     opacity: .4;
    45.     z-index: 1;
    46. }
    47.  
    48. .video-section .poster .video-bg {
    49.     display: block;
    50. }
    51. .video-section .poster:hover .icon-play {
    52.     opacity: .5;
    53. }
    54. .video-section .icon-play {
    55.     position: absolute;
    56.     top: calc(50% - 25px);
    57.     left: calc(50% - 25px);
    58.     z-index: 2;
    59.     width: 50px;
    60.     height: 50px;
    61.     transition: all .3s;
    62.     opacity: 1;
    63. }
    64. </style>
    65. <body>
    66. <main class="container">
    67.     <!-- S 视频 section-->
    68.     <section class="video-section index-section section" id="video-section">
    69.         <div class="swiper-container">
    70.             <div class="swiper-wrapper">
    71.                 <div class="swiper-slide">
    72.                     <div class="video">
    73.                         <a class="poster">
    74.                             <img class="video-bg" src="images/Community-media4_03.png" width="100%"/>
    75.                             <div class="icon-play">
    76.                                 <img src="images/icon-play.png" width="100%"/>
    77.                             </div>
    78.                         </a>
    79.                         <video class="videoContent" controls poster="images/Community-media4_03.png" width="100%">
    80.                             <source src="images/movie.mp4" type="video/mp4" width="100%"/>
    81.                         </video>
    82.                     </div>
    83.                 </div>
    84.                 <div class="swiper-slide">
    85.                     <div class="video">
    86.                         <a class="poster">
    87.                             <img class="video-bg" src="images/Community-media4_03.png" width="100%"/>
    88.                             <div class="icon-play">
    89.                                 <img src="images/icon-play.png" width="100%"/>
    90.                             </div>
    91.                         </a>
    92.                         <video class="videoContent" controls poster="images/Community-media4_03.png" width="100%">
    93.                             <source src="images/movie.mp4" type="video/mp4" width="100%"/>
    94.                         </video>
    95.                     </div>
    96.                 </div>
    97.             </div>
    98.             <div class="swiper-pagination"></div>
    99.         </div>
    100.     </section>
    101.     <!-- E 视频 section-->
    102. </main>
    103. </body>
    104. <script>
    105.     $(function () {
    106.  
    107.         // S 视频 video-section
    108.  
    109.         // 第2屏轮播
    110.         var videoSection = new Swiper('#video-section .swiper-container', {
    111.             autoplay: 8000,
    112.             speed: 800,
    113.             loop: true,
    114.             observer: true,//修改swiper自己或子元素时，自动初始化swiper
    115.             observeParents: true,
    116.             autoplayDisableOnInteraction: false,
    117.             pagination: '#video-section .swiper-pagination',
    118.             paginationClickable: true,
    119.         });
    120.         videoSection.on('SlideChangeStart',function () {
    121.             $('.videoContent').hide();
    122.             $('.poster').show();
    123.             $('.video video')[0].pause();
    124.             videoSection.startAutoplay();
    125.             // alert(swiper.activeIndex) //切换结束时，告诉我现在是第几个slide
    126.  
    127.         })
    128.         $('.video').on('click', function () {
    129.             if ($(this).children('.videoContent').is(':hidden')) {
    130.                 $(this).children('.videoContent').show();
    131.                 $(this).children('video')[0].play()
    132.                 $(this).children('.poster').hide();
    133.                 videoSection.stopAutoplay();
    134.             } else {
    135.                 $(this).children('.videoContent').hide();
    136.                 $(this).children('.poster').show();
    137.                 $(this).children('video')[0].pause()
    138.                 videoSection.startAutoplay();
    139.                 setTimeout(()=>{
    140.                     videoSection.slideNext();
    141.                 },500)
    142.             }
    143.         })
    144.         // 监听视频播放
    145.         $('.video video').on('ended', function () {
    146.             $('.video  .videoContent').hide();
    147.             $('.video .poster').show();
    148.             videoSection.startAutoplay();
    149.             videoSection.slideNext();
    150.         })
    151.         // E 视频
    152.     })
    153. </script>
    154. </html>

  • 相关阅读:
    LeetCode:1337. 矩阵战斗力最弱的 K 行、11. 盛最多水的容器、剑指 Offer 51. 数组中的逆序对题解
    redis6.2（二）Redis的新数据类型、使用java语言操作Redis
    iPhone或在2024开放第三方应用商店。
    xml 里面判断int类型，String类型不为空
    Linux+qt：获取.so自身的路径（利用dladdr）
    4.drf-版本管理
    什么情况下你该考虑离职？
    康耐视深度学习ViDi-Plugins菜单介绍
    JavaSE - 数据类型
    盘点3种Python网络爬虫过程中的中文乱码的处理方法
  • 原文地址：https://blog.csdn.net/weixin_40667613/article/details/125502087