时间:2023-03-18来源:系统城装机大师作者:佚名
最近闲来无事,在自己的小程序里面集成了一个小视频的接口,但是由于小程序对于播放视频的限制,只能用来做一个demo刷视频了,没办法上线体验。
小程序播放视频限制最多10个,超出可能就崩了。
我也有想过用js去追加和删减,但是还是有点麻烦了,等有空了再把想法化为现实吧。
uniapp
项目里面的 pages.json
文件中修改当前页面路径的 navigationStyle
1 2 3 4 5 6 7 8 |
{ "path" : "pages/searchvideo/searchvideo" , "style" : { "navigationBarTitleText" : "小视频" , "enablePullDownRefresh" : false , "navigationStyle" : "custom" } } |
顶部栏可以根据自己的需求自定义,我这里放了一个类似于抖音的 tab栏
。
在uniapp
和原生的微信小程序
里面都有 swiper
标签用于做滚动或轮播效果的组件,所以我们可以直接利用这个组件做出我们想要的效果。
1 2 3 4 5 6 7 8 |
< swiper class = "card-swiper" :circular = "true" vertical = "true" :autoplay = "true" duration = "500" interval = "5000" @ change = "cardSwiper" > < swiper-item v-for = "(item,index) in swiperList" :key = "index" :class = "cardCur==index?'cur':''" > < view class = "swiper-item image-banner" > < video :id = "`video-${item.id}`" :src = "item.mp4" loop style = "height: 100vh;width: 100vw;" ></ video > </ view > </ swiper-item > </ swiper > |
autoplay
元素,可以让页面打开时,不会自动播放视频。duration
的值,需要等于当前视频的播放时长。swiperList
的数据,方便我们操作当前视频。1 2 3 4 5 6 7 8 9 10 11 |
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' }] |
data
中定义 swiperList
数据内容,当然你也可以做成接口形式动态添加进去。cardCur
的默认值,用于配置视频滚动下标。1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
.card-swiper { height : 100 vh !important ; } .card-swiper swiper-item { width : 750 rpx !important ; left : 0 rpx; box-sizing: border-box; overflow : initial; } .card-swiper swiper-item .swiper-item { width : 100% ; display : block ; height : 100 vh; border-radius: 0 rpx; transform: scale( 1 ); transition: all 0.2 s ease-in 0 s; overflow : hidden ; } .card-swiper swiper-item.cur .swiper-item { transform: none ; transition: all 0.2 s ease-in 0 s; } .card-swiper swiper-item .swiper-item-png { margin-top : -50 vh; width : 100% ; display : block ; border-radius: 0 rpx; transform: translate( 1040 rpx, 20 rpx) scale( 0.5 , 0.5 ); transition: all 0.6 s ease 0 s; } .card-swiper swiper-item.cur .swiper-item-png { margin-top : -100 vh; width : 900 rpx; transform: translate( -80 rpx, 0 rpx) scale( 1 , 1 ); transition: all 0.6 s ease 0 s; } .image-banner { display : flex; align-items: center ; justify- content : center ; } .image-banner image { width : 100% ; } |
1 2 3 4 5 6 7 8 9 10 11 |
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() } } } |
methods
中定义 swiper
改变时的方法,用于控制视频的暂停和播放。由于uniapp
是可以直接编译成 H5
的,所以我们就直接在掘金代码片段
中看一下效果吧。
代码片段里面的内容是直接引用的uniapp云发布的链接,如果想了解这一块的内容,可以单独开篇文章写一下的。
1 2 3 |
< div id = "app" > < iframe src = "https://static-54d8ac48-ba3d-4f0d-8a0b-029cbc34a4b3.bspapp.com/#/" width = "400" height = "800" ></ iframe > </ div > |
{"success":false,"error":{"code":"InvalidSpace.Deleted","message":"The space is already deleted."},"data":null}
这个功能对于小程序来说做起来不算太复杂,也是由于微信的限制,不能做出太复杂的刷视频的功能。大家可以根据自己的需求去修改这一块的代码
2023-03-18
ChatGPT在前端领域的初步探索2023-03-18
Vue.js React与Angular流行前端框架优势对比2023-03-18
threeJs实现波纹扩散及光标浮动效果详解假如某个新开发的功能,要新增10张表,按照这个时间计算,至少要100分钟,仔细想想,其实你会发现大部分的时间都浪费在这些简单而又重复的编程圈子中去了。那有没有一个办法,将这些简...
2023-03-15
二、Keil下载和安装教程 三、注册教程 1、以管理员身份运行Keil uVision5(必须要以管理员身份运行) 2、点击右上角File,再点击License Managment 3、复制CID 4、以管理员身份运行keygen.exe(必须使用管理员身份运行) 5、Ta...
2023-03-15