github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 视频加载失败提示

Browse Source
This commit is contained in:
pipipi-pikachu 2022-09-03 16:28:15 +08:00
parent 3292572160
commit 16574930f7
2 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/components/element/VideoElement/VideoPlayer/index.vue
View File

@ -11,6 +11,8 @@
@click="autoHideController()" @click="autoHideController()"
> >
<div class="video-wrap" @click="toggle()"> <div class="video-wrap" @click="toggle()">
<div class="load-error" v-if="loadError">视频加载失败</div>
<video <video
class="video" class="video"
ref="videoRef" ref="videoRef"
@ -72,7 +74,7 @@
<div class="icons icons-right"> <div class="icons icons-right">
<div class="speed"> <div class="speed">
<div class="icon speed-icon"> <div class="icon speed-icon">
<span class="icon-content" @click="speedMenuVisible = !speedMenuVisible">倍速</span> <span class="icon-content" @click="speedMenuVisible = !speedMenuVisible">{{playbackRate === 1 ? '倍速' : (playbackRate + 'x')}}</span>
<div class="speed-menu" v-if="speedMenuVisible" @mouseleave="speedMenuVisible = false"> <div class="speed-menu" v-if="speedMenuVisible" @mouseleave="speedMenuVisible = false">
<div <div
class="speed-menu-item" class="speed-menu-item"
@ -86,7 +88,7 @@
</div> </div>
<div class="loop" @click="toggleLoop()"> <div class="loop" @click="toggleLoop()">
<div class="icon loop-icon" :class="{ 'active': loop }"> <div class="icon loop-icon" :class="{ 'active': loop }">
<span class="icon-content">循环</span> <span class="icon-content">循环{{loop ? '开' : '关'}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -115,7 +117,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import useMSE from './useMSE' import useMSE from './useMSE'
import { message } from 'ant-design-vue'
const props = defineProps({ const props = defineProps({
width: { width: {
@ -254,7 +255,8 @@ const handleProgress = () => {
loaded.value = videoRef.value?.buffered.length ? videoRef.value.buffered.end(videoRef.value.buffered.length - 1) : 0 loaded.value = videoRef.value?.buffered.length ? videoRef.value.buffered.end(videoRef.value.buffered.length - 1) : 0
} }
const handleError = () => message.error('视频加载失败') const loadError = ref(false)
const handleError = () => loadError.value = true
const thumbMove = (e: MouseEvent | TouchEvent) => { const thumbMove = (e: MouseEvent | TouchEvent) => {
if (!videoRef.value || !playBarWrap.value) return if (!videoRef.value || !playBarWrap.value) return

16
src/views/components/element/VideoElement/VideoPlayer/style.scss
View File

@ -161,7 +161,7 @@
align-items: center; align-items: center;
&.icons-right { &.icons-right {
right: 8px; right: 15px;
} }
.time { .time {
line-height: 38px; line-height: 38px;
@ -384,3 +384,17 @@
} }
} }
} }
.load-error {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
font-size: 15px;
color: #fff;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
}