<template>
<view class="videoPlayer">
<video
id="myVideo"
class="video"
:src="video.videoUrl"
:loop="true"
:autoplay="autoplay"
controls
@click="click"></video>
</view>
</template>
<script>
var timer=null
export default {
props:['video','index'],
data() {
return {
play:false,
dblClick:false,
autoplay:false
};
},
mounted(){
this.videoContext=uni.createVideoContext('myVideo',this)
},
methods:{
click(){
clearTimeout(timer)
this.dblClick=!this.dblClick
timer=setTimeout(()=>{
if(this.dblClick){
if(this.play===false){
this.playThis()
}else{
this.pause()
}
}else{
this.$emit('changeClick')
}
this.dblClick=false
},300)
},
player(){
console.log('执行了播放，此时play值为', this.play)
if(this.play===false){
this.videoContext.seek(0)
this.videoContext.play()
this.play=true
}
},
pause(){
if(this.play===true){
this.videoContext.pause()
this.play=false
console.log('执行了我,当前play', this.play)
}
},
playThis(){
if(this.play===false){
this.videoContext.play()
this.play=true
}
},
atuo(){
if(this.index===1){
this.play = true
this.autoplay=true
}
}
},
created() {
this.atuo()
}
}
</script>
<style scoped>
.videoPlayer{
height: 100%;
width:100%;
}
.video{
height: 100%;
width:100%;
z-index: 1;
}
</style>
- 此时视频组件已经准备好了，可以单击播放暂停，双击事件，那么剩下的就是上下滑动了
<template>
<view class="page-container">
<swiper class="swiper-box" :circular="true" :current="page" :vertical="true"
@touchstart="touchStart" @touchend="touchEnd" @change="changeplay">
<swiper-item v-for="(item, index) in videos" :key="index">
<view class="swiper-item">
<video-player
ref="player"
:video="item"
:index="index"
></video-player>
</view>
<view class="left-box">
<list-left :item="item"></list-left>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import videoPlayer from './videoPlayer.vue'
import listLeft from './listLeft.vue'
let time = null
export default {
components: {
videoPlayer,
listLeft
},
data() {
return {
videos:[
{
id: 0,
img: 'https://b2b.17nic.com/Content/Upload/Video/3e1826e0-74cf-43a9-8e7c-5f087e6c7ec0.jpeg',
title: '如何快速购买数字人云名片',
info: '如何快速购买数字人云名片',
videoUrl: 'https://b2b.17nic.com/Content/Upload/Video/198fa957-92ab-4b8f-a06c-23a9d0e33caf.mp4'
},
{
id: 1,
img: 'https://b2b.17nic.com/Content/Upload/Video/ca80d641-65d1-4bb9-9f19-aa72a1d88cbc.jpeg',
title: '如何创建自己的数字人',
info: '如何创建自己的数字人',
videoUrl: 'https://b2b.17nic.com/Content/Upload/Video/ae4ca469-d1c4-4039-9e13-3d153770e36a.mp4'
},
{
id: 2,
img: 'https://b2b.17nic.com/Content/Upload/Video/96fa8d34-6eed-4ed0-bd91-2b36727a1d2a.jpeg',
title: '如何制作自己的数字人名片',
info: '如何制作自己的数字人名片',
videoUrl: 'https://b2b.17nic.com/Content/Upload/Video/a4344a75-16f5-4af6-bcdf-71abb7658e5b.mp4'
},
{
id: 3,
img: 'https://b2b.17nic.com/Content/Upload/Video/5378175b-e796-4e85-ae01-4e51d0a37287.jpeg',
title: '如何制作数字人节日祝福视频？',
info: '如何制作数字人节日祝福视频？',
videoUrl: 'https://b2b.17nic.com/Content/Upload/Video/c6ce553a-49c0-407c-a62b-02438edaeb6a.mp4'
},
{
id: 4,
img: 'https://b2b.17nic.com/Content/Upload/Video/c0ab5ed4-654c-41ca-aab4-cd2c78fc4af5.jpeg',
title: '如何创建数字人表情包',
info: '如何创建数字人表情包？',
videoUrl: 'https://b2b.17nic.com/Content/Upload/Video/233718ef-dddf-42f2-9c24-5ccdb0e281bc.mp4'
}
],
// 开始拖动的位置
pageStatrY:0,
// 结束拖动的位置
pageEndY:0,
page:1,
// 是否滑动了页面
isSwiper: false,
};
},
onLoad() {
this.init()
},
methods: {
touchStart(res){
this.pageStatrY = res.changedTouches[0].pageY
this.pageEndY = 0
console.log('开始滑动', res)
},
touchEnd(res){
this.pageEndY = res.changedTouches[0].pageY
setTimeout(()=>{
if (this.isSwiper) {
// 如果滑动了页面,执行滑动逻辑
this.touchSwiper()
}
}, 10)
},
//上下滑动触发事件
changeplay(res) {
this.page = res.detail.current
this.isSwiper = true
console.log('change', res.detail.current)
},
// 滑动逻辑
touchSwiper() {
this.isSwiper = false
if(this.pageEndY > this.pageStatrY){
console.log('向上滑动')
if (this.page == 4) {
this.$refs.player[0].pause()
} else {
this.$refs.player[this.page+1].pause()
}
this.pageStatrY=0
this.pageEndY=0
} else if (this.pageStatrY > this.pageEndY){
console.log('向下滑动')
if (this.page == 0) {
this.$refs.player[4].pause()
} else {
this.$refs.player[this.page-1].pause()
}
this.pageStatrY=0
this.pageEndY=0
}
setTimeout(()=>{
this.$refs.player[this.page].player()
},20)
},
}
}
</script>
<style scoped lang="scss">
.swiper-box {
height: 100%;
width: 100%;
.swiper-item {
width: 100%;
height: 100%;
background-color: #000;
}
.left-box{
z-index:10;
position:absolute;
bottom: 35px;
left: 10px;
right: 10px;
background-color: rgba(0, 0, 0, .5);
}
}
</style>
- 现在上下拖动播放也可以了
- 还可以做视频的说明文字和右侧点赞评论列表
// listLeft.vue
<template>
<view class="listLeft">
<view class="author d-flex a-center">
<text class="iconfont pr-1 font-lg" :class="is_show ? 'icon-jiangxu' : 'icon-shengxu'" @tap.stop="info_show"></text><text class="line-nowrap-2">{{item.title}}</text>
</view>
<view class="title" :class="is_show ? 'info_class' : ''">
{{item.info ? item.info : ''}}
</view>
<view class="box">
<view class="music">
@月光下跳舞，婀娜多姿@
</view>
</view>
</view>
</template>
<script>
export default {
props:['item'],
data() {
return {
is_show: false
};
},
methods: {
info_show() {
this.is_show = !this.is_show
}
},
}
</script>
<style scoped>
.listLeft{
/* height: 120px; */
/* margin-left:10px ; */
margin-right:80px ;
padding-bottom: 18rpx;
color:#FFFFFF;
}
.author{
/* height: 35px; */
line-height: 20px;
font-size: 15px;
}
.author_text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.title{
line-height: 27px;
font-size: 13px;
width: 100%;
word-wrap: break-word;
max-height: 80px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
height: 0;
transition: all .4s;
}
.info_class {
height: 80px;
}
.box{
width:100px;
overflow: hidden;
}
.music{
height: 35px;
line-height: 35px;
font-size: 12px;
width: 140px;
animation: music 4s linear 0.2s infinite;
}
@keyframes music{
0%{
transform:translate3d(80%,0,0)
}
100%{
transform:translate3d(-80%,0,0)
}
}
.iconfont.pr-1 {
animation: updown 1s linear infinite alternate;
}
@keyframes updown{
0%{
transform:translateY(-2px)
}
100%{
transform:translateY(2px)
}
}
</style>
