Skip to content

L
live-management-web
Commit 28a22dd5 by haojie
Options

动作视频结尾不会播放的问题

parent b85de4a3
Showing with 251 additions and 47 deletions
src/components/AddVideoPlay.vue
<template>
<div class="add-video-play">
<div class="main-video-play" v-show="showFirstVideo && !showActionVideo">
<div class="main-video-play" v-show="showFirstVideo && !showActionVideo && !showActionEndVideo">
<template v-for="(item, index) in mainVideoList" :key="item.name">
<video
v-show="item.show"
......@@ -16,7 +16,7 @@
</div>
<!-- 互动 -->
<video
v-show="!showFirstVideo && !showActionVideo"
v-show="!showFirstVideo && !showActionVideo && !showActionEndVideo"
ref="videoSecond"
:volume="secondVideoVolume"
class="video-default"
......@@ -26,13 +26,21 @@
></video>
<!-- 动作 -->
<video
v-show="showActionVideo"
v-show="showActionVideo && !showActionEndVideo"
ref="videoAction"
class="video-default"
:src="actionVideo"
@ended="actionVideoEnded"
@canplay="actionCanplay"
></video>
<!-- 结束动作 -->
<video
v-show="showActionEndVideo"
ref="videoEndAction"
class="video-default"
:src="actionEndVideo"
@ended="actionEndVideoEnded"
></video>
<ConfirmDialog
v-model="confirmVisible"
:closeOnOverlayClick="false"
......@@ -60,12 +68,13 @@ import Loading from '@/components/Loading/FirstCircle.vue';
import { onBeforeRouteLeave } from 'vue-router';
import { injectWindow } from '@/utils/pyqt';
import { scriptTypePhonetics } from '@/service/CreateLive';
import { isDev } from '@/utils/tool';
// 再加一个动作视频标签
const props = withDefaults(
defineProps<{
playMainIndex: number | null;
currentPlayMainIndex: number | null;
video2: string;
actionVideo?: string;
playId?: any;
......@@ -76,7 +85,9 @@ const props = withDefaults(
currentMainVideoIndex: number | null;
playInfo: any;
firstVideoIsMain: boolean;
endVideoIsMain: boolean;
showActionVideo: boolean;
realVideoList: any[];
}>(),
{
progress: 0,
......@@ -89,11 +100,12 @@ const emit = defineEmits([
'playEnd',
'actionPlayChange',
'update:progress',
'update:playMainIndex',
'update:currentPlayMainIndex',
'mainVideoListChange',
'initActionVideo',
'update:showActionVideo',
'update:firstVideoIsMain',
'update:endVideoIsMain',
]);
const store = useStore();
......@@ -115,7 +127,7 @@ const videoSecondFirstPlay = ref(true);
const actionVideoFirstPlay = ref(true);
// 当前正在播放的主视频下标
const currentPlayMainIndex = ref(props.playMainIndex);
const currentPlayMainIndex = ref(props.currentPlayMainIndex);
/**
* element
......@@ -126,6 +138,13 @@ const videoFirst = ref<HTMLVideoElement>();
const videoSecond = ref<HTMLVideoElement>();
// 动作视频
const videoAction = ref<HTMLVideoElement>();
// 结束动作
const videoEndAction = ref<HTMLVideoElement>();
// 结束动作是否显示
const showActionEndVideo = ref(false);
// 结束动作url
const actionEndVideo = ref('');
// 初始音量
const initVolume = 1;
......@@ -160,6 +179,7 @@ const mainVideoPlayChange = (status: boolean, index: number | boolean = false) =
} else if (typeof index === 'number') {
updateMainVideoShow(true, index);
videoFirst.value[index].play();
currentPlayMainIndex.value = index;
}
openInterval();
} else {
......@@ -203,6 +223,12 @@ const confirm = () => {
}
// 确定之后修改状态
emit('update:firstVideoIsMain', true);
// 找最后的动作
findLastAction();
if (isDev()) {
// 测试将视频进度改为160
// videoFirst.value[currentPlayMainIndex.value].currentTime = 170;
}
};
// 主视频可以播放
......@@ -231,6 +257,26 @@ const mainVideoPlayStatus = (index: number) => {
});
};
// 结束动作视频状态改变
const endActionVideoStatus = (status: boolean) => {
showActionEndVideo.value = status;
if (status) {
videoEndAction.value.play();
} else {
videoEndAction.value.pause();
}
};
// 找到最后一个动作视频
const findLastAction = () => {
const { realVideoList, mainVideoList, endVideoIsMain } = props;
if (!endVideoIsMain && typeof currentPlayMainIndex.value === 'number') {
const actionUrl = realVideoList[mainVideoList[currentPlayMainIndex.value].videoIndex].actionUrl;
actionEndVideo.value = actionUrl[actionUrl.length - 1].url;
console.log(actionEndVideo.value, '找到结束动作视频了');
}
};
// 下一个要播放的视频
const nextVideoToPlay = (status: boolean = true) => {
const { mainVideoList } = props;
......@@ -240,7 +286,7 @@ const nextVideoToPlay = (status: boolean = true) => {
if (nextIndex !== -1 && status) {
mainVideoPlayStatus(nextIndex);
// 更新当前正在播放的video标签下标
emit('update:playMainIndex', nextIndex);
emit('update:currentPlayMainIndex', nextIndex);
if (mainVideoList[nextIndex].restart && status) {
// 本次播放是重复播放，通知父组件初始化动作视频的状态
console.log('本次播放是重复播放,初始化动作视频的状态');
......@@ -256,6 +302,8 @@ const nextVideoToPlay = (status: boolean = true) => {
// 播放
console.log('开始播放下一个主视频,1');
mainVideoPlayChange(true, nextIndex);
findLastAction();
// 找到最后一个动作视频
} else if (nextIndex == -1 && !status) {
// 更新状态
emit('mainVideoListChange', {
......@@ -266,6 +314,7 @@ const nextVideoToPlay = (status: boolean = true) => {
// 播放
console.log('开始播放下一个主视频,2');
mainVideoPlayChange(true);
findLastAction();
} else {
console.log('未找到下一个要播放的主视频');
}
......@@ -298,8 +347,14 @@ const firstVideoEnded = (index: number) => {
});
// 强制关闭自己的播放状态，防止loop生效
mainVideoPlayChange(false);
// 最后一个视频是否是主视频
if (props.endVideoIsMain) {
// 找下一个
nextVideoToPlay();
} else {
// 播放结束动作
endActionVideoStatus(true);
}
}
};
......@@ -333,6 +388,16 @@ const actionVideoEnded = () => {
}
};
// 结束动作播放完毕
const actionEndVideoEnded = () => {
if (videoEndAction.value.ended) {
// 隐藏自己
endActionVideoStatus(false);
// 下一个主视频
nextVideoToPlay();
}
};
const canplay2 = () => {
if (!videoSecondFirstPlay.value) {
showFirstVideo.value = false;
......@@ -386,12 +451,13 @@ const onPlay = () => {
console.log(index, '开始播放', mainVideoList[index]);
// 开始播放
mainVideoPlayChange(true, index);
emit('update:playMainIndex', index);
emit('update:currentPlayMainIndex', index);
}
// 第一个视频连带着第二个视频一起播放--立马暂停是为了处理后续进来的视频
videoSecond.value.play();
videoSecond.value.pause();
videoSecondFirstPlay.value = false;
findLastAction();
};
const onStop = () => {
......@@ -408,7 +474,7 @@ watch(
);
watch(props.playInfo, (v) => {
if (v && v.is_main) {
if (v && v.mainStart) {
//
console.log('开始播放主视频-watch');
nextVideoToPlay(false);
......@@ -445,7 +511,7 @@ watch(
);
watch(
() => props.playMainIndex,
() => props.currentPlayMainIndex,
(v) => {
currentPlayMainIndex.value = v;
},
......@@ -463,7 +529,7 @@ watch(
watch(
() => currentPlayMainIndex.value,
(v) => {
emit('update:playMainIndex', v);
emit('update:currentPlayMainIndex', v);
},
);
......
src/components/form/index.tsx 0 → 100644
import { DataType } from '@/utils/tool';
import './index.less';
import { defineComponent, provide, ref } from 'vue';
export default defineComponent({
props: {
data: Object,
rules: Object,
},
emits: ['submit'],
setup(props, { emit, slots }) {
const newRule = ref<any>({});
const ewriteRules = () => {
const { data, rules } = props;
Object.keys(rules).forEach((key: string) => {
rules[key].forEach((item: any) => {
// 是否显示error
item.leShow = false;
if (!DataType(newRule.value[key], 'array')) {
newRule.value[key] = [];
}
newRule.value[key].push(item);
});
});
console.log(newRule.value);
// 注入规则，提供给item使用
provide('leRules', rules);
};
//
ewriteRules();
const onSubmit = () => {
// 校验
// 通知tab_panel
emit('submit');
};
return () => (
<form class="le-form" onSubmit={onSubmit}>
{slots.default ? slots.default() : ''}
</form>
);
},
});
src/components/formItem/index.tsx 0 → 100644
import './index.less';
import { defineComponent, inject, ref } from 'vue';
export default defineComponent({
props: {
name: String,
},
setup(props, { emit, slots }) {
const leRules: { value: object } = inject('leRules');
return () => (
<div class="le-form-item">
{slots.default ? slots.default() : ''}
<div class="form-item-error">{/* */}</div>
</div>
);
},
});
src/pages/OnlyVideoLive/indexV2.vue
......@@ -2,9 +2,10 @@
<div class="custom-start-only-video-page">
<div class="start-only-video-live">
<AddVideoPlay
v-model:playMainIndex="currentPlayMainIndex"
v-model:currentPlayMainIndex="currentPlayMainIndex"
v-model:showActionVideo="showActionVideo"
v-model:firstVideoIsMain="firstVideoIsMain"
v-model:endVideoIsMain="endVideoIsMain"
:loading="loading"
:playId="addVideoId"
:liveDetail="liveDetail"
......@@ -13,6 +14,7 @@
:mainVideoList="mainVideoList"
:currentMainVideoIndex="currentMainVideoIndex"
:playInfo="playInfo"
:realVideoList="realVideoList"
@playEnd="playEnd"
@actionPlayChange="actionPlayChange"
@initActionVideo="initActionVideo"
......@@ -37,7 +39,9 @@ const {
currentMainVideoIndex,
playInfo,
firstVideoIsMain,
endVideoIsMain,
showActionVideo,
realVideoList,
playEnd,
actionPlayChange,
currentTimeChange,
......
src/pages/OnlyVideoLive/useScript.ts
......@@ -59,6 +59,8 @@ export default function () {
// 当前播放的视频中，第一个视频是否为主视频
const firstVideoIsMain = ref(true);
// 当前播放的视频中，最后一个视频是否为主视频
const endVideoIsMain = ref(true);
// 互动视频
const addVideo = ref(imgs.mp4);
......@@ -74,7 +76,7 @@ export default function () {
const liveDetail = ref<any>({});
// 通知视频播放
const playInfo = ref({
is_main: true,
mainStart: true,
num: 0,
});
......@@ -276,7 +278,7 @@ export default function () {
// 当前播放进度变化
const currentTimeChange = (index: number, value: number) => {
// console.log(value, '当前进度');
// console.log(value, '当前主视频进度');
let row = mainVideoList.value[index];
// 剩余多少没有播放
let currentEsidueTime = row.total - value;
......@@ -345,9 +347,9 @@ export default function () {
item.play = false;
item.status = false;
});
if (row.is_main) {
if (row.mainStart) {
// 是主视频--通知视频直接播放
playInfo.value.is_main = true;
playInfo.value.mainStart = true;
playInfo.value.num += 1;
}
};
......@@ -461,6 +463,11 @@ export default function () {
const currentAction = actionUrl[index];
// 当前正在播放的主视频的进度
const currentProgress = currentMain.current;
// 最后一个视频是动作视频,当前找到的url和最后一个动作的链接一致的
if (!currentMain.mainEnd.status && currentAction.uuid == currentMain.mainEnd.uuid) {
// console.log('最后一个视频是动作视频，这里不处理');
return;
}
// 是否到了播放时间
if (currentProgress >= currentAction.play_time) {
// 可以播放
......@@ -564,54 +571,75 @@ export default function () {
// 创建url
res.data = {};
let url =
'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-21cff27bcf-ebb2-4380-b328-3069247c02c7.mp4';
'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-21c68c10b7-611a-47b3-a3e7-8362c4a206b3.mp4';
let list = [
// 动作视频
{
url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-217a507cc4-55c3-4c70-81d6-24594944e3c9.mp4',
type: 3,
play_time: 0,
},
{
url: url,
type: 1,
},
// {
// url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4',
// type: 3,
// play_time: 15,
// },
// 动作视频
{
url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-217a507cc4-55c3-4c70-81d6-24594944e3c9.mp4',
type: 3,
play_time: 10,
},
// 动作视频
{
url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-217a507cc4-55c3-4c70-81d6-24594944e3c9.mp4',
url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-2192d4a904-c78a-4a87-9728-d93bb40cad77.mp4',
type: 3,
play_time: 20,
play_time: 30,
},
{
url: url,
type: 1,
},
{
url: 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/2/2023-08-217a51d89c-1a9f-476b-950c-f81d0423b816.mp4',
type: 3,
play_time: 0,
},
];
res.data.url = list;
}
if (DataType(res.data, 'object') && res.data.url && res.data.url.length) {
res.data.url.forEach((item: any) => {
item.uuid = v4();
});
const mainUrl = res.data.url.filter((item: any) => item.type == mainVideoType);
realVideoList.value.push({
// 主视频列表
url: mainUrl,
// 过滤动作视频
actionUrl: res.data.url.filter((item: any) => {
const actionUrl = res.data.url.filter((item: any) => {
if (item.type == actionVideoType) {
item.remove = false;
item.play = false;
item.status = false;
return item;
}
}),
});
// 最后一个视频是否是动作视频
const lastRow = res.data.url[res.data.url.length - 1];
let mainEnd = lastRow.type === mainVideoType ? true : false;
let url = '';
let uuid = '';
if (mainEnd) {
url = lastRow.url;
} else {
// 最后一个不是主视频,才有uuid
uuid = lastRow.uuid;
}
console.log(actionUrl, '动作列表');
realVideoList.value.push({
// 主视频列表
url: mainUrl,
// 过滤动作视频
actionUrl: actionUrl,
// 第一个视频是否是主视频
is_main: res.data.url[0].type === mainVideoType ? true : false,
mainStart: res.data.url[0].type === mainVideoType ? true : false,
// 最后一个视频是否是主视频
mainEnd: {
status: mainEnd,
url: url,
// 生成一个uid
uuid: uuid,
},
// 合并后的地址
result: '',
// 是否播放完毕
......@@ -628,7 +656,7 @@ export default function () {
if (isDev()) {
if (isFirst.value) {
if (realVideoList.value[0].is_main) {
if (realVideoList.value[0].mainStart) {
// 首个视频是主视频的
mergeCallback({
video: mainUrl[0].url,
......@@ -716,7 +744,7 @@ export default function () {
let videoIndex = realVideoList.value.findIndex((item: any) => !item.remove && item.result && !item.status);
if (videoIndex !== -1) {
const realVideoRow = realVideoList.value[videoIndex];
if (!realVideoRow.is_main) {
if (!realVideoRow.mainStart) {
console.log('当前要播放的主视频列表中，第一个视频是动作视频');
firstVideoIsMain.value = false;
mainVideoList.value[0].show = false;
......@@ -729,6 +757,12 @@ export default function () {
} else {
firstVideoIsMain.value = true;
}
// 最后一个视频是否主视频
if (!realVideoRow.mainEnd.status) {
endVideoIsMain.value = false;
} else {
endVideoIsMain.value = true;
}
// 存入视频
mainVideoList.value[index].url = realVideoRow.result;
......@@ -841,7 +875,9 @@ export default function () {
mainVideoList,
playInfo,
firstVideoIsMain,
endVideoIsMain,
showActionVideo,
realVideoList,
playEnd,
actionPlayChange,
currentTimeChange,
......
src/pages/login/index.vue
......@@ -49,6 +49,42 @@
</div>
</t-form-item>
</t-form>
<!-- <CustomForm ref="form" class="custom-login-form" :data="formData" :rules="FORM_RULES" @submit="onSubmit">
<CustomFormItem name="account">
<div class="form-item-box">
<div class="label required">账号</div>
<CustomInput
placeholder=""
:needSelect="true"
:selectList="rememberList.list"
v-model="formData.account"
@submitAccount="submitAccount"
align="left"
className="reset-login-input"
></CustomInput>
</div>
</CustomFormItem>
<CustomFormItem name="password">
<div class="form-item-box">
<div class="label required">请输入密码</div>
<CustomInput
placeholder=""
className="reset-login-input"
type="password"
v-model="formData.password"
align="left"
></CustomInput>
</div>
</CustomFormItem>
<CustomFormItem>
<CheckBox class="remember-password-box" v-model="remember">记住密码</CheckBox>
</CustomFormItem>
<CustomFormItem>
<div class="submit-box">
<Button type="submit" theme="green" class="reset-login-submit-btn">登录</Button>
</div>
</CustomFormItem>
</CustomForm> -->
</div>
</div>
</template>
......@@ -64,6 +100,9 @@ import { setRememberList, getRememberList } from '@/utils/remember';
import { UserLogin } from '@/utils/api/userApi';
import { useRouter } from 'vue-router';
import CheckBox from '@/components/CheckBox.vue';
import CustomForm from '@/components/form';
import CustomFormItem from '@/components/formItem';
const store = useStore();
const router = useRouter();
......
stats.html
This source diff could not be displayed because it is too large. You can view the blob instead.
vite.config.ts
......@@ -38,12 +38,12 @@ export default defineConfig(({ command, mode }) => {
}),
// viteCompression(),
// 打包体积分析
visualizer({
open: true, //注意这里要设置为true，否则无效
filename: 'stats.html', //分析图生成的文件名
gzipSize: true, // 收集 gzip 大小并将其显示
brotliSize: true, // 收集 brotli 大小并将其显示
}),
// visualizer({
// open: true, //注意这里要设置为true，否则无效
// filename: 'stats.html', //分析图生成的文件名
// gzipSize: true, // 收集 gzip 大小并将其显示
// brotliSize: true, // 收集 brotli 大小并将其显示
// }),
// importToCDN({
// modules: [
// {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment