313 lines
8.5 KiB
Vue
313 lines
8.5 KiB
Vue
|
<template>
|
|||
|
|
<swiper
|
|||
|
|
class="m-tiktok-video-swiper"
|
|||
|
|
circular
|
|||
|
|
@change="swiperChange"
|
|||
|
|
:current="state.current"
|
|||
|
|
:vertical="true"
|
|||
|
|
duration="300"
|
|||
|
|
>
|
|||
|
|
<swiper-item v-for="(item, index) in state.displaySwiperList" :key="index">
|
|||
|
|
<view class="swiper-item" @click="(e) => handleClick(index, e)">
|
|||
|
|
<video
|
|||
|
|
:id="`video__${index}`"
|
|||
|
|
:controls="controls"
|
|||
|
|
:autoplay="false"
|
|||
|
|
:loop="loop"
|
|||
|
|
@ended="ended"
|
|||
|
|
@controlstoggle="controlstoggle"
|
|||
|
|
@play="onPlay"
|
|||
|
|
@error="emits('error')"
|
|||
|
|
class="m-tiktok-video-player"
|
|||
|
|
:src="item.src || item.explainUrl"
|
|||
|
|
v-if="index === 0 || !state.isFirstLoad"
|
|||
|
|
></video>
|
|||
|
|
<view class="cover-triangle" v-if="pause"></view>
|
|||
|
|
<image
|
|||
|
|
v-if="item.poster && state.displayIndex != index"
|
|||
|
|
:src="item.poster"
|
|||
|
|
class="m-tiktok-video-poster"
|
|||
|
|
mode="aspectFit"
|
|||
|
|
></image>
|
|||
|
|
<slot :item="item"></slot>
|
|||
|
|
</view>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, reactive, getCurrentInstance, watch, nextTick } from 'vue';
|
|||
|
|
import { onLoad, onUnload } from '@dcloudio/uni-app';
|
|||
|
|
const _this = getCurrentInstance();
|
|||
|
|
const emits = defineEmits(['play', 'error', 'loadMore', 'change', 'controlstoggle', 'click', 'ended']);
|
|||
|
|
|
|||
|
|
const lastTapTime = ref(0);
|
|||
|
|
const pause = ref(false);
|
|||
|
|
const props = defineProps({
|
|||
|
|
/**
|
|||
|
|
* 视频列表
|
|||
|
|
*/
|
|||
|
|
videoList: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => [],
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 是否循环播放一个视频
|
|||
|
|
*/
|
|||
|
|
loop: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true,
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 显示原生控制栏
|
|||
|
|
*/
|
|||
|
|
controls: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true,
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 是否自动播放
|
|||
|
|
*/
|
|||
|
|
autoplay: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true,
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 是否自动滚动播放
|
|||
|
|
*/
|
|||
|
|
autoChange: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false,
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 滚动加载阈值（即播放到剩余多少个之后触发加载更多
|
|||
|
|
*/
|
|||
|
|
loadMoreOffsetCount: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 2,
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 暂停 1 单机暂停； 2 双击暂停； 0关闭
|
|||
|
|
*/
|
|||
|
|
pauseType: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 2,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const state = reactive({
|
|||
|
|
originList: [], // 源数据
|
|||
|
|
displaySwiperList: [], // swiper需要的数据
|
|||
|
|
displayIndex: 0, // 用于显示swiper的真正的下标数值只有：0，1，2。
|
|||
|
|
originIndex: 0, // 记录源数据的下标
|
|||
|
|
current: 0,
|
|||
|
|
oid: 0,
|
|||
|
|
showControls: '',
|
|||
|
|
toggleShow: true, // 显示面板
|
|||
|
|
videoContexts: [],
|
|||
|
|
isFirstLoad: true,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const initVideoContexts = () => {
|
|||
|
|
state.videoContexts = [
|
|||
|
|
uni.createVideoContext('video__0', _this),
|
|||
|
|
uni.createVideoContext('video__1', _this),
|
|||
|
|
uni.createVideoContext('video__2', _this),
|
|||
|
|
];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onPlay = (e) => {
|
|||
|
|
emits('play', e);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const setVideoRef = (el, index) => {
|
|||
|
|
if (el) {
|
|||
|
|
videoRefs.value[index] = el;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function handleClick(index, e) {
|
|||
|
|
const now = Date.now();
|
|||
|
|
switch (props.pauseType) {
|
|||
|
|
case 1:
|
|||
|
|
if (pause.value) {
|
|||
|
|
state.videoContexts[index].play();
|
|||
|
|
pause.value = false;
|
|||
|
|
} else {
|
|||
|
|
state.videoContexts[index].pause();
|
|||
|
|
pause.value = true;
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
if (now - lastTapTime.value < 300) {
|
|||
|
|
if (pause.value) {
|
|||
|
|
state.videoContexts[index].play();
|
|||
|
|
pause.value = false;
|
|||
|
|
} else {
|
|||
|
|
state.videoContexts[index].pause();
|
|||
|
|
pause.value = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
lastTapTime.value = now;
|
|||
|
|
state.toggleShow = !state.toggleShow;
|
|||
|
|
emits('click', e);
|
|||
|
|
}
|
|||
|
|
function ended() {
|
|||
|
|
// 自动切换下一个视频
|
|||
|
|
if (props.autoChange) {
|
|||
|
|
if (state.displayIndex < 2) {
|
|||
|
|
state.current = state.displayIndex + 1;
|
|||
|
|
} else {
|
|||
|
|
state.current = 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
emits('ended');
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* 初始一个显示的swiper数据
|
|||
|
|
* @originIndex 从源数据的哪个开始显示默认0，如从其他页面跳转进来，要显示第n个，这个参数就是他的下标
|
|||
|
|
*/
|
|||
|
|
function initSwiperData(originIndex = state.originIndex) {
|
|||
|
|
const originListLength = state.originList.length; // 源数据长度
|
|||
|
|
const displayList = [];
|
|||
|
|
displayList[state.displayIndex] = state.originList[originIndex];
|
|||
|
|
displayList[state.displayIndex - 1 == -1 ? 2 : state.displayIndex - 1] =
|
|||
|
|
state.originList[originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1];
|
|||
|
|
displayList[state.displayIndex + 1 == 3 ? 0 : state.displayIndex + 1] =
|
|||
|
|
state.originList[originIndex + 1 == originListLength ? 0 : originIndex + 1];
|
|||
|
|
state.displaySwiperList = displayList;
|
|||
|
|
|
|||
|
|
if (state.oid >= state.originList.length) {
|
|||
|
|
state.oid = 0;
|
|||
|
|
}
|
|||
|
|
if (state.oid < 0) {
|
|||
|
|
state.oid = state.originList.length - 1;
|
|||
|
|
}
|
|||
|
|
// 暂停所有视频
|
|||
|
|
state.videoContexts.map((item) => item?.stop());
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// 当前视频
|
|||
|
|
if (props.autoplay) {
|
|||
|
|
uni.createVideoContext(`video__${state.displayIndex}`, _this).play();
|
|||
|
|
}
|
|||
|
|
}, 500);
|
|||
|
|
// 数据改变
|
|||
|
|
emits('change', {
|
|||
|
|
index: originIndex,
|
|||
|
|
detail: state.originList[originIndex],
|
|||
|
|
});
|
|||
|
|
// 加载更多
|
|||
|
|
var pCount = state.originList.length - props.loadMoreOffsetCount;
|
|||
|
|
if (originIndex == pCount) {
|
|||
|
|
emits('loadMore');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* swiper滑动时候
|
|||
|
|
*/
|
|||
|
|
function swiperChange(event) {
|
|||
|
|
const { current } = event.detail;
|
|||
|
|
state.isFirstLoad = false;
|
|||
|
|
const originListLength = state.originList.length; // 源数据长度
|
|||
|
|
// 向后滚动
|
|||
|
|
if (state.displayIndex - current == 2 || state.displayIndex - current == -1) {
|
|||
|
|
state.originIndex = state.originIndex + 1 == originListLength ? 0 : state.originIndex + 1;
|
|||
|
|
state.displayIndex = state.displayIndex + 1 == 3 ? 0 : state.displayIndex + 1;
|
|||
|
|
state.oid = state.originIndex - 1;
|
|||
|
|
initSwiperData(state.originIndex);
|
|||
|
|
}
|
|||
|
|
// 如果两者的差为-2或者1则是向前滑动
|
|||
|
|
else if (state.displayIndex - current == -2 || state.displayIndex - current == 1) {
|
|||
|
|
state.originIndex = state.originIndex - 1 == -1 ? originListLength - 1 : state.originIndex - 1;
|
|||
|
|
state.displayIndex = state.displayIndex - 1 == -1 ? 2 : state.displayIndex - 1;
|
|||
|
|
state.oid = state.originIndex + 1;
|
|||
|
|
initSwiperData(state.originIndex);
|
|||
|
|
}
|
|||
|
|
state.toggleShow = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function controlstoggle(e) {
|
|||
|
|
state.showControls = e.detail.show;
|
|||
|
|
emits('controlstoggle', e);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => props.videoList,
|
|||
|
|
() => {
|
|||
|
|
if (props.videoList?.length) {
|
|||
|
|
state.originList = props.videoList;
|
|||
|
|
if (state.isFirstLoad || !state.videoContexts?.length) {
|
|||
|
|
initSwiperData();
|
|||
|
|
initVideoContexts();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
immediate: true,
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
let loadTimer = null;
|
|||
|
|
onLoad(() => {
|
|||
|
|
// 为了首次只加载一条视频（提高首次加载性能），延迟加载后续视频
|
|||
|
|
loadTimer = setTimeout(() => {
|
|||
|
|
state.isFirstLoad = false;
|
|||
|
|
clearTimeout(loadTimer);
|
|||
|
|
}, 5000);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onUnload(() => {
|
|||
|
|
clearTimeout(loadTimer);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
defineExpose({
|
|||
|
|
initSwiperData,
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="stylus" scoped>
|
|||
|
|
.m-tiktok-video-swiper,
|
|||
|
|
.m-tiktok-video-player {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background-color: #000;
|
|||
|
|
}
|
|||
|
|
.m-tiktok-video-swiper {
|
|||
|
|
.swiper-item {
|
|||
|
|
position: relative;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.m-tiktok-video-poster {
|
|||
|
|
background-color: #000;
|
|||
|
|
position: absolute;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cover-triangle{
|
|||
|
|
position: absolute;
|
|||
|
|
left: 50%;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translate(-50%, -50%)
|
|||
|
|
width: 132rpx
|
|||
|
|
height: 132rpx
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: rgba(0,0,0,0.3)
|
|||
|
|
}
|
|||
|
|
.cover-triangle::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-40%, -50%) rotate(90deg);
|
|||
|
|
width: 0;
|
|||
|
|
height: 0;
|
|||
|
|
border-left: 40rpx solid transparent;
|
|||
|
|
border-right: 40rpx solid transparent;
|
|||
|
|
border-bottom: 60rpx solid #fff;
|
|||
|
|
}
|
|||
|
|
</style>
|