前言

最近闲来无事，在自己的小程序里面集成了一个小视频的接口，但是由于小程序对于播放视频的限制，只能用来做一个demo刷视频了，没办法上线体验。

小程序播放视频限制最多10个，超出可能就崩了。

我也有想过用js去追加和删减，但是还是有点麻烦了，等有空了再把想法化为现实吧。

演示一下看看

去掉小程序顶部栏

uniapppages.jsonnavigationStyle

{
    "path": "pages/searchvideo/searchvideo",
    "style": {
        "navigationBarTitleText": "小视频",
        "enablePullDownRefresh": false,
        "navigationStyle": "custom"
    }
}

tab栏

滚动小视频

uniapp微信小程序swiper

组件

autoplaydurationswiperList

数据

cardCur: 0,
swiperList: [{
    id: 0,
    mp4: 'http://vcdnb.huoying666.com/new_video/2022/0725/b94a235358c31668dc99e7cff9fe5e9c/v1080/b94a235351_6921661_fhd.mp4'
}, {
    id: 1,
    mp4: 'http://vcdnb.huoying666.com/new_video/2020/1211/9d0b01c88bd05721f9de88122de72db1/v1080/9d0b01c881_5872976_fhd.mp4'
}, {
    id: 2,
    mp4: 'http://vcdnb.huoying666.com/new_video/2021/1109/6f5610c304083ca59141c8f70aca6396/v720/6f5610c301_6578243_hd.mp4'
}]

dataswiperListcardCur

样式

.card-swiper {
        height: 100vh !important;
}
.card-swiper swiper-item {
        width: 750rpx !important;
        left: 0rpx;
        box-sizing: border-box;
        overflow: initial;
}
.card-swiper swiper-item .swiper-item {
        width: 100%;
        display: block;
        height: 100vh;
        border-radius: 0rpx;
        transform: scale(1);
        transition: all 0.2s ease-in 0s;
        overflow: hidden;
}
.card-swiper swiper-item.cur .swiper-item {
        transform: none;
        transition: all 0.2s ease-in 0s;
}
.card-swiper swiper-item .swiper-item-png {
        margin-top: -50vh;
        width: 100%;
        display: block;
        border-radius: 0rpx;
        transform: translate(1040rpx, 20rpx) scale(0.5, 0.5);
        transition: all 0.6s ease 0s;
}
.card-swiper swiper-item.cur .swiper-item-png {
        margin-top: -100vh;
        width: 900rpx;
        transform: translate(-80rpx, 0rpx) scale(1, 1);
        transition: all 0.6s ease 0s;
}
.image-banner {
        display: flex;
        align-items: center;
        justify-content: center;
}
.image-banner image {
        width: 100%;
}

事件

cardSwiper(e) {
    this.cardCur = e.detail.current
    for (let i = 0; i < this.swiperList.length; i++) {
        const videoContext = uni.createVideoContext(`video-${this.swiperList[i]['id']}`, this)
        if (i === this.cardCur) {
            videoContext.play()
        } else {
            videoContext.stop()
        }
    }
}

methodsswiper

uniappH5掘金代码片段

代码片段

代码片段里面的内容是直接引用的uniapp云发布的链接，如果想了解这一块的内容，可以单独开篇文章写一下的。

 {"success":false,"error":{"code":"InvalidSpace.Deleted","message":"The space is already deleted."},"data":null}

写完了就得总结一下

这个功能对于小程序来说做起来不算太复杂，也是由于微信的限制，不能做出太复杂的刷视频的功能。大家可以根据自己的需求去修改这一块的代码