js+swiper实现视频上下滑动

枫叶&情缘

已于 2023-08-31 10:18:19 修改

阅读量1.1k

点赞数

分类专栏： swiper JavaScript 文章标签： javascript 音视频开发语言

于 2022-07-28 14:24:09 首次发布

本文链接：https://blog.csdn.net/weixin_45791806/article/details/126008534

版权

JavaScript 同时被 2 个专栏收录

67 篇文章 2 订阅

订阅专栏

swiper

3 篇文章 0 订阅

订阅专栏

这里是视频插件使用的是腾讯云点播：
HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>播放</title>
    <script src="js/rem.js"></script>
    <link href="video/css/tcplayer.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/video.css">
    <style>
        .video-js {
            width: 100% !important;
            height: 90% !important;
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            width: 100%;
            position: relative;
            background-color: #000;
            color: aliceblue;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }
        .topwx{
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 99;
            height: 7%;
        }
        .topwx img{
            width: 100%;
            
        }
        .vjs-errors-content-container{
            display: none !important;
        }
        .video-js .vjs-modal-dialog{
            display: none !important;
        }
        .right-line,.titli_ju,.guanzhu{
            position: absolute;    
        }
    </style>
</head>

<body>
    <div class="page-video-warp">
        <div class="page-content">
            <div class="swiper-container">
                <div class="swiper-wrapper">

                </div>
            </div>
        </div>
    </div>
    
</body>
<script src="js/jquery-1.11.0.js"></script>
<script src="js/swiper5.min.js"></script>

 <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.1/libs/TXLivePlayer-1.2.0.min.js"></script>
 <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/hls.min.0.13.2m.js"></script>
 <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/flv.min.1.6.2.js"></script>
 <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/tcplayer.v4.5.2.min.js"></script>
<script src="js/video.js?v=53"></script>

</html>

video.js

var page = {
    initialSlideid:1,
    video_id: 'player-container-id-1',
    vide_imgurl: '',
    palay_video: {},
    init: function () {
        let that = this;
        that.initPage();
    },
    initPage: function () {
        $.ajax({
            url: '你的接口',
            data: {},
            success: function (data) {
                page.SwiperArr(data);   
                page.vide_imgurl = data.imgurl;//封面图
            }
        })
    },
    // 轮播
    SwiperArr(arr) {
        $.each(arr, function (i, item) {
            // video的id
            page.video_id = 'player-container-id-' + item.id;
            if (page.detailId == item.id) {
                page.initialSlideid = i;
                var preload = 'auto';
            } else {
                var preload = 'none';
            };
            var lihtml = $(
                `<div class="swiper-slide swiper_${i}" data-videoid="${page.video_id}" data-id="${item.id}" data-src="${item.videourl}" style="height: 100%;">
                       <video id="${page.video_id}" 
                            style="object-fit:fill" 
                            src="" 
                            playsinline="playsinline"
                            airplay="allow"
                            x-webkit-airplay="true"  
                            webkit-playsinline="true" 
                            x5-video-orientation="portraint"
                            x5-video-player-type="h5" 
                            x5-video-player-fullscreen="true"
                        ></video>
			    </div>`
            );
            $(".swiper-wrapper").append(lihtml);
            if (i == 0) {
                page.palay_video[item.id] = new TCPlayer(page.video_id, {
                    autoplay: true,//自动播放
                    posterImage: true,
                    preload: preload,
                    muted: true,
                    loop: false,
                    bigPlayButton: false,
                    sources: {
                        src: item.videourl,
                        type: 'video/m3u8'
                    },
                    controlBar: {
                        volumePanel: true,
                        fullscreenToggle: false,
                        playbackRateMenuButton: false,
                        timeDivider: true
                    }
                });
                //视频封面图
                page.palay_video[item.id].poster(page.vide_imgurl);
                // 视频播放链接
                page.palay_video[item.id].src(item.videourl);
                // 视频播放结束
                page.palay_video[item.id].on('ended', function (error) {
                    mySwiper.slideNext();
                });
                // 视频资源加载完成
                page.palay_video[item.id].on('progress', function(error) {
                    page.palay_video[item.id].play();
                });
                $('.swiper-slide').eq(0).attr('data-item', '1');
            }
           
            
            mySwiper = new Swiper('.swiper-container', {
                initialSlide:page.initialSlideid,
                direction: 'vertical', // 垂直切换选项mySwiper.slideNext()
                observer: true,//解决swiper初始化时dom元素还没有加载完成造成的不能轮播
                observeParents: true,//解决swiper初始化时dom元素还没有加载完成造成的不能轮播
                lazy: {
                    loadPrevNext: true,
                },
                on: {
                    slideChangeTransitionEnd: function () {
                        // 获取视频id唯一值
                        var palay_vid = $('.swiper_' + this.activeIndex).attr('data-id');
                        // 获取video id
                        var videoid = $('.swiper_' + this.activeIndex).attr('data-videoid');
                        // 判断
                        var dataitem = $('.swiper-slide').eq(this.activeIndex).attr('data-item');
                        // 获取当前视频播放链接
                        var swiper_src = $('.swiper-slide').eq(this.activeIndex).attr('data-src');
                        // uc属性同层级播放
                        $('#'+videoid).attr('raw-controls','false');
                        if (dataitem != 1 ) {
                            page.palay_video[palay_vid] = new TCPlayer(videoid, {
                                autoplay: true,//自动播放
                                posterImage: true,
                                preload: preload,
                                muted: false,
                                loop: false,
                                bigPlayButton: false,
                                sources: {
                                    src: swiper_src,
                                    type: 'video/m3u8'
                                },
                                controlBar: {
                                    volumePanel: true,
                                    fullscreenToggle: false,
                                    playbackRateMenuButton: false,
                                    timeDivider: true
                                }
                            });
                            page.palay_video[palay_vid].poster(page.vide_imgurl);
                            page.palay_video[palay_vid].on('ended', function (error) {
                                mySwiper.slideNext();
                            });
                        }
                        if (swiper_src != undefined) {
                            var videoLength = $(".swiper-container .swiper-slide").length;
                            for (var k = 0; k <= videoLength; k++) {
                                // 判断播放当前的视频
                                if (k == this.activeIndex) {
                                    var dataid = $('.swiper_' + k).attr('data-id');
                                    if (dataitem != 1) {
                                        page.palay_video[dataid].src(swiper_src);
                                    };
                                    page.palay_video[dataid].play();
                                    $('.swiper-slide').eq(this.activeIndex).attr('data-item', '1');

                                } else {
                                    // 其余的暂停
                                    var dataid = $('.swiper_' + k).attr('data-id');
                                    if (dataid != undefined) {
                                        page.palay_video[dataid] && page.palay_video[dataid].pause();
                                    }
                                }
                                
                                
                            }
                        }
                    },
                },
            });
        })
    },

}
page.init();