66 lines
1.2 KiB
Vue
66 lines
1.2 KiB
Vue
<template>
|
|
<fix-base-style :styleSpacing="styleSpacing" :styleColor="styleColor" :index="index">
|
|
<div class="fix-video">
|
|
<div class="inner" v-if="video">
|
|
<video
|
|
:src="video"
|
|
:poster="cover"
|
|
class="vertical"
|
|
controls
|
|
:class="[mode == 'horizontal' ? 'horizontal' : 'vertical']"
|
|
></video>
|
|
</div>
|
|
</div>
|
|
</fix-base-style>
|
|
</template>
|
|
|
|
<script lang="ts" name="fix-video" setup>
|
|
import { baseProps } from "../../hooks";
|
|
|
|
const props = defineProps({
|
|
mode: {
|
|
type: String,
|
|
default: "horizontal",
|
|
},
|
|
video: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
cover: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: "local",
|
|
},
|
|
index: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
...baseProps,
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.fix-video {
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
video {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: block; /* 避免 inline 元素造成的间隙 */
|
|
object-fit: cover;
|
|
}
|
|
.vertical {
|
|
width: 750rpx;
|
|
height: 1334rpx; /* 高度根据宽高比自动调整 */
|
|
object-fit: contain; /* 保持视频的宽高比，不会拉伸 */
|
|
}
|
|
.horizontal {
|
|
width: 750rpx; /* 屏幕宽度适配 */
|
|
height: calc(750rpx * 9 / 16); /* 适用于 16:9 的宽高比 */
|
|
}
|
|
}
|
|
</style>
|