You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.7 KiB
Vue
63 lines
1.7 KiB
Vue
3 weeks ago
|
<!--
|
||
|
|
* @Author: donghao donghao@supervision.ltd
|
||
|
|
* @Date: 2025-08-19 11:04:59
|
||
|
|
* @LastEditors: donghao donghao@supervision.ltd
|
||
|
|
* @LastEditTime: 2025-08-19 11:26:43
|
||
|
|
* @FilePath: \5G-Web\src\components\Swiper\SwiperPlayer.vue
|
||
|
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<div class="flex items-center justify-center w-full h-full position-relative">
|
||
|
|
<video
|
||
|
|
ref="videoRef"
|
||
|
|
:controls="false"
|
||
|
|
muted
|
||
|
|
:src="videoUrl"
|
||
|
|
width="100%"
|
||
|
|
height="148"
|
||
|
|
style="object-fit: cover"
|
||
|
|
@error="handleVideoError"
|
||
|
|
v-if="!isVideoError"
|
||
|
|
></video>
|
||
|
|
<div class="bg_error_img" v-if="isVideoError"></div>
|
||
|
|
<div :class="{ bg_icon: true, playing: isPlaying }" v-if="!isVideoError">
|
||
|
|
<!-- {{ isPlaying }} -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
const props = defineProps<{
|
||
|
|
videoUrl: string;
|
||
|
|
isPlaying: boolean;
|
||
|
|
}>();
|
||
|
|
const videoRef = ref<HTMLVideoElement | null>(null);
|
||
|
|
const isVideoError = ref<boolean>(false);
|
||
|
|
|
||
|
|
const handleVideoError = () => {
|
||
|
|
console.log("handleVideoError");
|
||
|
|
isVideoError.value = true;
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.bg_error_img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: url("@/assets/common/load_file_error.png") no-repeat center center;
|
||
|
|
background-size: 50%;
|
||
|
|
border: 1px dashed red;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg_icon {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: url("@/assets/common/player_icon_1.png") no-repeat center center;
|
||
|
|
background-size: 40px;
|
||
|
|
|
||
|
|
&.playing {
|
||
|
|
background: url("@/assets/common/player_icon_2.png") no-repeat center center;
|
||
|
|
background-size: 40px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|