rogee/mp-qvyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: issues

Browse Source
This commit is contained in:
Rogee
2024-12-15 01:37:38 +08:00
parent 4a606bd824
commit 5da2894283
1 changed files with 12 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
frontend/src/views/PlayView.vue
View File

@@ -1,7 +1,6 @@
<template> <template>
<van-nav-bar :title="item.title" left-text="返回" left-arrow @click-left="onClickLeft" /> <van-nav-bar :title="item.title" left-text="返回" left-arrow @click-left="onClickLeft" />
<video id="video" :poster="item.poster"></video> <video controls id="video" :poster="item.poster" />
<van-progress v-if="playing" :percentage="(100 * currentTime) / item.duration" stroke-width="8" :show-pivot="false" />
<template v-if="false === item.bought"> <template v-if="false === item.bought">
<van-notice-bar left-icon="volume-o" text="未购买的视频、音频默认播放时长为1分钟左右。" /> <van-notice-bar left-icon="volume-o" text="未购买的视频、音频默认播放时长为1分钟左右。" />
@@ -9,29 +8,18 @@
花费 {{ (item.price * item.discount) / 100 }} 点 立即购买 花费 {{ (item.price * item.discount) / 100 }} 点 立即购买
</van-button> </van-button>
</template> </template>
<template v-else></template>
<div id="container"> <div id="container">
<van-space direction="vertical" fill size="2rem"> <van-space direction="vertical" fill size="2rem">
<template v-if="playing"> <van-row gutter="20" v-if="!pageLoading">
<van-row> <van-col span="12">
<van-col span="24"> <van-button type="primary" plain round @click="play(item.hash, 'video')" size="large" block>看视频</van-button>
<van-button type="danger" @click="stop()" size="large" block>结束播放</van-button> </van-col>
</van-col> <van-col span="12">
</van-row> <van-button type="warning" plain round="" @click="play(item.hash, 'audio')" size="large"
</template> block>听音频</van-button>
</van-col>
<template v-else> </van-row>
<van-row gutter="20" v-if="!pageLoading">
<van-col span="12">
<van-button type="primary" plain round @click="play(item.hash, 'video')" size="large" block>看视频</van-button>
</van-col>
<van-col span="12">
<van-button type="warning" plain round="" @click="play(item.hash, 'audio')" size="large"
block>听音频</van-button>
</van-col>
</van-row>
</template>
</van-space> </van-space>
</div> </div>
</template> </template>
@@ -49,32 +37,18 @@ const item = ref({
title: "加载中...", title: "加载中...",
}); });
const currentTime = ref(0);
const duration = ref(0);
const playing = ref(false);
onBeforeUnmount(() => { onBeforeUnmount(() => {
const player = document.getElementById("video"); const player = document.getElementById("video");
if (player && playing.value) { if (player) {
stop(); player.pause();
} }
}); });
onMounted(() => { onMounted(() => {
loadMedia(route.params.hash); loadMedia(route.params.hash);
const player = document.getElementById("video"); const player = document.getElementById("video");
player.addEventListener("timeupdate", updateTime);
player.addEventListener("loadedmetadata", () => {
duration.value = player.duration;
});
player.addEventListener("ended", function () { player.addEventListener("ended", function () {
console.log("Video ended"); console.log("Video ended");
playing.value = false;
});
player.addEventListener("pause", () => {
playing.value = false;
player.currentTime = 0;
currentTime.value = 0;
}); });
}); });
@@ -154,8 +128,6 @@ const loadMedia = (hash) => {
}; };
const play = (hash, type) => { const play = (hash, type) => {
playing.value = true;
const player = document.getElementById("video"); const player = document.getElementById("video");
const source = `/v1/medias/${hash}/${type}`; const source = `/v1/medias/${hash}/${type}`;
if (Hls.isSupported()) { if (Hls.isSupported()) {
@@ -176,27 +148,6 @@ const play = (hash, type) => {
}); });
} }
}; };
const updateTime = () => {
const player = document.getElementById("video");
currentTime.value = player?.currentTime;
};
const stop = () => {
const player = document.getElementById("video");
if (!player) {
return;
}
player.pause();
player.currentTime = 0;
currentTime.value = 0;
};
const formatTime = (time) => {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
};
</script> </script>
<style scoped> <style scoped>