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.6 KiB
Vue
63 lines
1.6 KiB
Vue
<!--
|
|
* @Author: donghao donghao@supervision.ltd
|
|
* @Date: 2025-08-19 11:04:59
|
|
* @LastEditors: donghao donghao@supervision.ltd
|
|
* @LastEditTime: 2025-08-20 09:46:44
|
|
* @FilePath: \5G-Web\src\components\Swiper\swiperPlayer.vue
|
|
* @Description: 作为轮播文件中的视频块
|
|
-->
|
|
<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="100%"
|
|
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>
|