uniapp+vant 实现抖音短视频播放
2021/4/9 18:55:51
本文主要是介绍uniapp+vant 实现抖音短视频播放,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
功能点: 上下滑动切换视频;tab标签切换分类
<template> <view class="app"> <view class="header"> <view class="back"></view> <van-tabs v-model="activeName" @click="onClick" style="width: 60%;background: rgba(255,255,255,0);"> <van-tab title="南山" name="a"> <swiper class="swiper" :current="current" :indicator-dots="indicatorDots" :circular="circular" :duration="duration" :vertical="vertical" style="height: 100%;" @change="swiperChange" > <block v-for="(item, index) in vlist" :key="index"> <swiper-item> <view class="uni_vdplayer"> <!-- controls:是否显示默认播放控件(播放/暂停按钮、播放进度、时间),loop:是否循环播放,show-center-play-btn:是否显示视频中间的播放按钮,object-fit:当视频大小与 video 容器大小不一致时,视频的表现形式。contain:包含,fill:填充,cover:覆盖 --> <video :id="'myVideoa' + index" :ref="'myVideoa' + index" class="player-video" :src="item.src" :controls="true" :loop="true" :show-center-play-btn="false" objectFit="contain" ></video> </view> </swiper-item> </block> </swiper> </van-tab> <van-tab title="关注" name="b"> <swiper class="swiper" :current="current2" :indicator-dots="indicatorDots" :circular="circular" :duration="duration" :vertical="vertical" style="height: 100%;" @change="swiperChange2" > <block v-for="(item, index) in vlist2" :key="index"> <swiper-item> <view class="uni_vdplayer"> <!-- controls:是否显示默认播放控件(播放/暂停按钮、播放进度、时间),loop:是否循环播放,show-center-play-btn:是否显示视频中间的播放按钮,object-fit:当视频大小与 video 容器大小不一致时,视频的表现形式。contain:包含,fill:填充,cover:覆盖 --> <video :id="'myVideob' + index" :ref="'myVideob' + index" class="player-video" :src="item.src" :controls="true" :loop="true" :show-center-play-btn="false" objectFit="contain" ></video> </view> </swiper-item> </block> </swiper> </van-tab> <van-tab title="推荐" name="c"> <swiper class="swiper" :current="current3" :indicator-dots="indicatorDots" :circular="circular" :duration="duration" :vertical="vertical" style="height: 100%;" @change="swiperChange3" > <block v-for="(item, index) in vlist3" :key="index"> <swiper-item> <view class="uni_vdplayer"> <!-- controls:是否显示默认播放控件(播放/暂停按钮、播放进度、时间),loop:是否循环播放,show-center-play-btn:是否显示视频中间的播放按钮,object-fit:当视频大小与 video 容器大小不一致时,视频的表现形式。contain:包含,fill:填充,cover:覆盖 --> <video :id="'myVideoc' + index" :ref="'myVideoc' + index" class="player-video" :src="item.src" :controls="true" :loop="true" :show-center-play-btn="false" objectFit="fill" ></video> </view> </swiper-item> </block> </swiper> </van-tab> </van-tabs> </view> </view> </template> <script> export default { data() { return { current:0, current2:0, current3:0, activeName: 'c', //tab标签页 player: null, //视频对象 indicatorDots: false, //显示面板指示点 duration: 200, //滑动动画时长 circular: true, //是否衔接滑动 vertical: true, //是否纵向滑动 vlist: [ { src: '../../../static/video/video1.mp4' }, { src: '../../../static/video/晴天.mp4' }, { src: '../../../static/video/city.mp4' }, { src: '../../../static/video/sky.mp4' }, { src: '../../../static/video/panda.mp4' }, { src: '../../../static/video/lol.mp4' } ], vlist2: [ { src: '../../../static/video/city.mp4' }, { src: '../../../static/video/panda.mp4' }, { src: '../../../static/video/video1.mp4' }, { src: '../../../static/video/晴天.mp4' }, { src: '../../../static/video/sky.mp4' }, { src: '../../../static/video/lol.mp4' } ], vlist3: [ { src: '../../../static/video/lol.mp4' }, { src: '../../../static/video/city.mp4' }, { src: '../../../static/video/sky.mp4' }, { src: '../../../static/video/panda.mp4' }, { src: '../../../static/video/video1.mp4' }, { src: '../../../static/video/晴天.mp4' }, ] }; }, onShow() { let newVideo = uni.createVideoContext('myVideo0'); if (!this.player) { this.player = newVideo; // this.player.pause(); setTimeout(() => { this.player.play(); }, 10); console.log(this.player + '播放'); return; } }, methods: { onClick(name){ if(name=="a"&& this.current!= 0){ this.player.pause() let newVideo=uni.createVideoContext('myVideo'+ name+ this.current) console.log(newVideo) if (this.player.id !== newVideo.id) { // console.log("切换视频主体"); newVideo.play(); // console.log("目前视频主体播放"); this.player.pause(); this.player.seek(0); //滑动视频从头播放 // console.log("之前视频主体暂停"); this.player = newVideo; // console.log("播放主体切换"); } }else if(name=="a"&& this.current== 0){ this.player.pause() let newVideo=uni.createVideoContext('myVideo'+ name+ "0") console.log(newVideo) if (this.player.id !== newVideo.id) { // console.log("切换视频主体"); newVideo.play(); // console.log("目前视频主体播放"); this.player.pause(); this.player.seek(0); //滑动视频从头播放 // console.log("之前视频主体暂停"); this.player = newVideo; // console.log("播放主体切换"); } } if(name=="b"&&this.current2!=0){ this.player.pause() let newVideo=uni.createVideoContext('myVideo'+ name+ this.current2) console.log(newVideo) if (this.player.id !== newVideo.id) { // console.log("切换视频主体"); newVideo.play(); // console.log("目前视频主体播放"); this.player.pause(); this.player.seek(0); //滑动视频从头播放 // console.log("之前视频主体暂停"); this.player = newVideo; // console.log("播放主体切换"); } }else if(name=="b"&&this.current2==0){ this.player.pause() let newVideo=uni.createVideoContext('myVideo'+ name+ "0") console.log(newVideo) // newVideo.play() if (this.player.id !== newVideo.id) { // console.log("切换视频主体"); newVideo.play(); // console.log("目前视频主体播放"); this.player.pause(); this.player.seek(0); //滑动视频从头播放 // console.log("之前视频主体暂停"); this.player = newVideo; // console.log("播放主体切换"); } } if(name=="c"&&this.current3!=0){ this.player.pause() let newVideo=uni.createVideoContext('myVideo'+ name+ this.current3) console.log(newVideo) if (this.player.id !== newVideo.id) { // console.log("切换视频主体"); newVideo.play(); // console.log("目前视频主体播放"); this.player.pause(); this.player.seek(0); //滑动视频从头播放 // console.log("之前视频主体暂停"); this.player = newVideo; // console.log("播放主体切换"); } }else if(name=="c"&&this.current3==0){ this.player.pause() let newVideo=uni.createVideoContext('myVideo'+ name+ "0") console.log(newVideo) if (this.player.id !== newVideo.id) { // console.log("切换视频主体"); newVideo.play(); // console.log("目前视频主体播放"); this.player.pause(); this.player.seek(0); //滑动视频从头播放 // console.log("之前视频主体暂停"); this.player = newVideo; // console.log("播放主体切换"); } } }, //控制播放 source 字段,表示导致变更的原因 swiperChange(current, source) { // console.log(current) this.current=current.target.current let newVideo = uni.createVideoContext('myVideo'+this.activeName + current.target.current); if (!this.player) { this.player = newVideo; this.player.play(); console.log(JSON.stringify(this.player) + '播放'); return; } // console.log(this.player.id) if (this.player.id !== newVideo.id) { // console.log("切换视频主体"); newVideo.play(); // console.log("目前视频主体播放"); this.player.pause(); this.player.seek(0); //滑动视频从头播放 // console.log("之前视频主体暂停"); this.player = newVideo; // console.log("播放主体切换"); } }, swiperChange2(current, source) { // console.log(current) this.current2=current.target.current let newVideo = uni.createVideoContext('myVideo'+this.activeName + current.target.current); if (!this.player) { this.player = newVideo; this.player.play(); console.log(JSON.stringify(this.player) + '播放'); return; } // console.log(this.player.id) if (this.player.id !== newVideo.id) { // console.log("切换视频主体"); newVideo.play(); // console.log("目前视频主体播放"); this.player.pause(); this.player.seek(0); //滑动视频从头播放 // console.log("之前视频主体暂停"); this.player = newVideo; // console.log("播放主体切换"); } }, swiperChange3(current, source) { // console.log(current) this.current3=current.target.current let newVideo = uni.createVideoContext('myVideo'+this.activeName + current.target.current); if (!this.player) { this.player = newVideo; this.player.play(); console.log(JSON.stringify(this.player) + '播放'); return; } // console.log(this.player.id) if (this.player.id !== newVideo.id) { // console.log("切换视频主体"); newVideo.play(); // console.log("目前视频主体播放"); this.player.pause(); this.player.seek(0); //滑动视频从头播放 // console.log("之前视频主体暂停"); this.player = newVideo; // console.log("播放主体切换"); } } } }; </script> <style> page { height: 100%; } .app { position: relative; width: 100%; display: block; height: 100%; } /* 头部 */ .header { display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 80upx; z-index: 100; justify-content: center; align-items: center; color: #ffffff; } .back { position: fixed; left: 0; top: 0; width: 80upx; height: 80upx; line-height: 80upx; } /* 播放器 */ .uni_vdplayer { height: 100%; } .player-video { width: 100%; height: 100%; } //更改vant tab组件的样式 .van-tabs__nav{ background: transparent!important; } .van-tabs__wrap{ height: 106upx!important; line-height: 106upx!important; } .van-tab{ color: #FFFFFF !important; font-size: 36upx!important; line-height: 100upx!important; } .van-tabs__line { background-color: #F1F1F1!important; } .van-tab__text--ellipsis{ display: block!important; height: 100upx!important; margin-top: 50upx!important; } .van-tabs__content{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .van-tab__pane{ height: 100%; } </style>
这篇关于uniapp+vant 实现抖音短视频播放的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-20测试人员都是画画大神,让我看看谁还不会用代码图?
- 2024-05-20年薪百万的程序员都在用的摸鱼方式……
- 2024-05-19永别了,微服务架构!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了