sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改视频播放逻辑

master
于肖磊 2025-09-19 10:15:14 +08:00
parent 46674631d5
commit 9fbd37893c
2 changed files with 22 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
pages/plugins/video/detail/detail.vue
View File

@ -1,8 +1,6 @@
<template> <template>
<view class="content"> <view class="content">
{{ current_index }} <swiper class="swiper-container" :key="'top-or-buttom-' + swiper_key" :style="swiperStyle" :vertical="true" :circular="close_circular ? false : true" :current="current_index" easing-function="easeInOutCubic" @change="handleSwiperChange">
{{ close_circular }}
<swiper class="swiper-container" :style="swiperStyle" :vertical="true" @change="handleSwiperChange" :current="current_index" :circular="close_circular ? false : true">
<swiper-item v-for="(video, index) in display_video_list" :key="video.id"> <swiper-item v-for="(video, index) in display_video_list" :key="video.id">
<view class="video-container" @tap="toggle_play_pause"> <view class="video-container" @tap="toggle_play_pause">
@ -102,6 +100,7 @@
<script> <script>
// import CommentModal from '@/components/CommentModal.vue'; // import CommentModal from '@/components/CommentModal.vue';
import { get_math } from '@/common/js/common/common.js'
import video_list from './video_list.json' import video_list from './video_list.json'
export default { export default {
components: { components: {
@ -124,6 +123,7 @@
move_distance: 0, move_distance: 0,
current_video_id: '1', // 当前播放视频的ID current_video_id: '1', // 当前播放视频的ID
is_slide_start: false, is_slide_start: false,
swiper_key: get_math(),
}; };
}, },
computed: { computed: {
@ -188,17 +188,13 @@
// 更新显示数据 // 更新显示数据
update_display_data() { update_display_data() {
console.log(this.current_index);
console.log('更新显示数据', this.current_video_index);
let list = []; let list = [];
// 如果当前索引为0，只显示当前元素和下一个元素 // 如果当前索引为0，只显示当前元素和下一个元素
if (this.current_index == 0) { if (this.current_index == 0) {
list = [ list = [
this.getVideoByIndex(this.current_video_index), this.getVideoByIndex(this.current_video_index),
this.getVideoByIndex(this.current_video_index + 1), this.getVideoByIndex(this.current_video_index + 1), // 下一个元素
this.getVideoByIndex(this.current_video_index + 2) this.getVideoByIndex(this.current_video_index - 1) // 上一个元素，
]; ];
} else if (this.current_index == 1) { // 索引为1时，为确保无限轮播正常，需要改变数据插入顺序 } else if (this.current_index == 1) { // 索引为1时，为确保无限轮播正常，需要改变数据插入顺序
list = [ list = [
@ -213,8 +209,7 @@
this.getVideoByIndex(this.current_video_index), this.getVideoByIndex(this.current_video_index),
]; ];
} }
console.log('更新显示数据', list);
this.setData({ this.setData({
display_video_list: list display_video_list: list
}) })
@ -243,18 +238,21 @@
this.current_video_id = this.display_video_list[current].id; this.current_video_id = this.display_video_list[current].id;
// 当滑动到边界时更新显示数据 // 当滑动到边界时更新显示数据
if (this.current_video_index == 0 && this.is_slide_start) { if (this.current_video_index == 0 && this.is_slide_start) {
this.$nextTick(() => { // this.$nextTick(() => {
const list = [ const list = [
this.getVideoByIndex(this.current_video_index), this.getVideoByIndex(0),
this.getVideoByIndex(this.current_video_index + 1), this.getVideoByIndex(1),
this.getVideoByIndex(this.current_video_index + 2) this.getVideoByIndex(2)
]; ];
console.log('更新显示数据', list);
this.setData({ this.setData({
is_slide_start: false, is_slide_start: false,
current_index: 0, current_index: 0,
display_video_list: list display_video_list: list,
swiper_key: get_math()
}) })
}) // })
} else if (this.current_video_index == this.videoData.length - 1) { } else if (this.current_video_index == this.videoData.length - 1) {
// this.$nextTick(() => { // this.$nextTick(() => {
const list = [ const list = [
@ -262,22 +260,18 @@
this.getVideoByIndex(this.current_video_index - 1), this.getVideoByIndex(this.current_video_index - 1),
this.getVideoByIndex(this.current_video_index), this.getVideoByIndex(this.current_video_index),
]; ];
console.log('更新显示数据', current);
console.log(list);
this.setData({ this.setData({
current_index: 2, current_index: 2,
display_video_list: list display_video_list: list,
swiper_key: get_math()
}) })
this.$forceUpdate();
// })
} else { } else {
this.is_slide_start = true;
// 预加载当前index之后的视频 // 预加载当前index之后的视频
this.update_display_data(); this.update_display_data();
} }
setTimeout(() => { setTimeout(() => {
this.is_slide_start = true;
// 播放当前视频 // 播放当前视频
if (this.video_contexts[current]) { if (this.video_contexts[current]) {
this.video_contexts[current].play(); this.video_contexts[current].play();

8
pages/plugins/video/detail/video_list.json
View File

@ -3,7 +3,7 @@
"id": "1", "id": "1",
"isFabulous": 1, "isFabulous": 1,
"userNick": "WX: MAMBA_4EVER24", "userNick": "WX: MAMBA_4EVER24",
"videoContent": "新视频来啦！", "videoContent": "第一条视频",
"fabulousCount": 1, "fabulousCount": 1,
"videoUrl": "http://8.146.211.120:8080/upload/douyin/e6fddef474951cc15f5aeb99219b4a91.mp4", "videoUrl": "http://8.146.211.120:8080/upload/douyin/e6fddef474951cc15f5aeb99219b4a91.mp4",
"posterUrl": "http://8.146.211.120:8080/upload/notes/ce5082f76cc9bd82a2bd97ce8b45ea32.jpg", "posterUrl": "http://8.146.211.120:8080/upload/notes/ce5082f76cc9bd82a2bd97ce8b45ea32.jpg",
@ -68,7 +68,7 @@
"id": "4", "id": "4",
"isFabulous": 1, "isFabulous": 1,
"userNick": "WX: MAMBA_4EVER24", "userNick": "WX: MAMBA_4EVER24",
"videoContent": "第三条视频内容", "videoContent": "第四条视频内容",
"fabulousCount": 1, "fabulousCount": 1,
"videoUrl": "http://shopxo.com/static/upload/video/goods/2023/08/17/1692267725487534.mp4", "videoUrl": "http://shopxo.com/static/upload/video/goods/2023/08/17/1692267725487534.mp4",
"posterUrl": "http://8.146.211.120:8080/upload/background/8049cff58c46adf4164907fb3abe63a8.jpg", "posterUrl": "http://8.146.211.120:8080/upload/background/8049cff58c46adf4164907fb3abe63a8.jpg",
@ -90,7 +90,7 @@
"id": "5", "id": "5",
"isFabulous": 1, "isFabulous": 1,
"userNick": "WX: MAMBA_4EVER24", "userNick": "WX: MAMBA_4EVER24",
"videoContent": "第四条视频内容", "videoContent": "第五条视频内容",
"fabulousCount": 1, "fabulousCount": 1,
"videoUrl": "http://shopxo.com/static/upload/video/goods/2019/01/14/1547458876723311.mp4", "videoUrl": "http://shopxo.com/static/upload/video/goods/2019/01/14/1547458876723311.mp4",
"posterUrl": "", "posterUrl": "",
@ -112,7 +112,7 @@
"id": "6", "id": "6",
"isFabulous": 1, "isFabulous": 1,
"userNick": "WX: MAMBA_4EVER24", "userNick": "WX: MAMBA_4EVER24",
"videoContent": "第五条视频内容", "videoContent": "第六条视频内容",
"fabulousCount": 1, "fabulousCount": 1,
"videoUrl": "http://shopxo.com/static/upload/video/goods/2023/08/17/1692267246598639.mp4", "videoUrl": "http://shopxo.com/static/upload/video/goods/2023/08/17/1692267246598639.mp4",
"posterUrl": "", "posterUrl": "",