You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
1.9 KiB
73 lines
1.9 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-11-17 15:15:41
|
|
@ 备注: 视频
|
|
-->
|
|
<script lang='ts' setup>
|
|
import { AnalysisCss,AnalysisInputCss } from '@/api/common/cssInfo'
|
|
const props = defineProps({
|
|
// eslint-disable-next-line vue/require-default-prop
|
|
data: {
|
|
type: Object,
|
|
}
|
|
})
|
|
const configStyle = computed(() => {
|
|
// console.log("视频宽度",props.data)
|
|
return props.data.styles || {}
|
|
})
|
|
const videoHeight = props.data?.control.videoMsg[0].videoHeight+'px'
|
|
|
|
const videoWidth = props.data?.control.videoMsg[0].videoWidth+'px'
|
|
|
|
const heightVal = ref("0px")
|
|
const widthtVal = ref("0px")
|
|
|
|
onMounted(()=>{
|
|
heightVal.value = props.data?.control.videoMsg[0].videoHeight+'px'
|
|
widthtVal.value = props.data?.control.videoMsg[0].videoWidth+'px'
|
|
// console.log("视频得长款",heightVal.value, widthtVal.value,props.data?.control)
|
|
});
|
|
watch(()=>props.data?.control.videoMsg[0], (val:any) => {
|
|
// console.log("视频得长款--》",val);
|
|
heightVal.value = val.videoHeight+'px'
|
|
widthtVal.value = val.videoWidth+'px'
|
|
},{
|
|
deep: true,
|
|
})
|
|
|
|
const getFormItemInputStyle = (ele: any,sty:number) => {
|
|
if(ele?.inputStyle){
|
|
console.log("返回栅格宽度4",AnalysisInputCss(ele?.inputStyle,sty))
|
|
return AnalysisInputCss(ele?.inputStyle,sty)
|
|
}
|
|
}
|
|
const openVideo = () => {
|
|
console.log("单机播放")
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="butBox" @click="openVideo">按钮</div>
|
|
<div>
|
|
<video
|
|
|
|
:loop="data?.control.videoMsg[0].loop"
|
|
:autoplay="data?.control.videoMsg[0].videoAutoPlay"
|
|
|
|
:style="getFormItemInputStyle(configStyle,2)"
|
|
controls
|
|
>
|
|
<source :src="data?.control.videoMsg[0].url" type="video/mp4">
|
|
|
|
您的浏览器不支持 HTML5 标签
|
|
</video>
|
|
|
|
</div>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.butBox{
|
|
width:150px;
|
|
height: 50px;
|
|
background-color: #FB041A;
|
|
display:none;
|
|
}
|
|
</style>
|