134 lines
3.7 KiB
Vue
134 lines
3.7 KiB
Vue
<!--
|
|
* @Author: hisense.liangjunhua
|
|
* @Date: 2022-06-08 15:25:33
|
|
* @LastEditors: hisense.liangjunhua
|
|
* @LastEditTime: 2022-06-14 11:30:52
|
|
* @Description: 应用展示 视频播放
|
|
-->
|
|
<template>
|
|
<div class="application-presentation" v-if="flag">
|
|
<detals-title title="组件展示" type="IMAGE&VIDEO"></detals-title>
|
|
<div
|
|
class="main"
|
|
:style="`${img}background-position:center;background-size:cover;`"
|
|
>
|
|
<div class="play" @click="showModal"></div>
|
|
</div>
|
|
<a-modal
|
|
v-model:visible="visible"
|
|
title="视频预览"
|
|
:width="750"
|
|
destroyOnClose
|
|
>
|
|
<template #footer></template>
|
|
<div style="width: 100%; display: flex; justify-content: center">
|
|
<div style="width: 100%; height: 100%">
|
|
<vue3VideoPlay v-bind="options" />
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, defineProps, watch } from 'vue'
|
|
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
|
const visible = ref(false)
|
|
const options = reactive({
|
|
width: '7.00rem', //播放器宽度
|
|
height: '4.00rem', //播放器高度
|
|
color: '#409eff', //主题色
|
|
title: '', //视频名称
|
|
src: '', //视频源
|
|
muted: false, //静音
|
|
webFullScreen: false,
|
|
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
|
|
autoPlay: true, //自动播放
|
|
loop: false, //循环播放
|
|
mirror: false, //镜像画面
|
|
ligthOff: false, //关灯模式
|
|
volume: 0.3, //默认音量大小
|
|
control: true, //是否显示控制
|
|
controlBtns: [
|
|
'audioTrack',
|
|
'quality',
|
|
'speedRate',
|
|
'volume',
|
|
'setting',
|
|
'pip',
|
|
'pageFullScreen',
|
|
'fullScreen',
|
|
], //显示所有按钮,
|
|
})
|
|
const showModal = () => {
|
|
visible.value = true
|
|
}
|
|
const props = defineProps({
|
|
dataList: { type: Object, default: null },
|
|
})
|
|
const flag = ref(true)
|
|
const img = ref({})
|
|
console.log('111111111111111111111,', props.dataList)
|
|
if (props.dataList.infoList) {
|
|
let obj = props.dataList.infoList.filter(
|
|
(item) => item.attrType === '组件视频介绍'
|
|
)[0]
|
|
console.log('视频==============>', obj)
|
|
if (!obj) {
|
|
flag.value = false
|
|
} else {
|
|
let imgindex = props.dataList.infoList.filter(
|
|
(item) => item.attrType === '组件图片'
|
|
)[0]
|
|
options.src = obj.attrValue
|
|
if (imgindex) {
|
|
img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
|
|
}
|
|
}
|
|
}
|
|
watch(
|
|
() => props.dataList,
|
|
(val) => {
|
|
if (val) {
|
|
let obj = val.infoList.filter(
|
|
(item) => item.attrType === '组件视频介绍'
|
|
)[0]
|
|
console.log('视频==============>', obj)
|
|
if (!obj) {
|
|
flag.value = false
|
|
} else {
|
|
let imgindex = props.dataList.infoList.filter(
|
|
(item) => item.attrType === '组件图片'
|
|
)[0]
|
|
options.src = obj.attrValue
|
|
if (imgindex) {
|
|
img.value =
|
|
'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
)
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.application-presentation {
|
|
padding: 0.8rem 3rem 0;
|
|
.main {
|
|
height: 3.4rem;
|
|
border-radius: 0.1rem;
|
|
background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
|
|
background-size: 100%;
|
|
margin-top: 0.4rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.play {
|
|
width: 0.96rem;
|
|
height: 0.96rem;
|
|
background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
|
|
background-size: 100%;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
</style>
|