diff --git a/src/packages/components/Informations/Mores/Video/config.ts b/src/packages/components/Informations/Mores/Video/config.ts
index 43c38cc1..c3c9474a 100644
--- a/src/packages/components/Informations/Mores/Video/config.ts
+++ b/src/packages/components/Informations/Mores/Video/config.ts
@@ -3,15 +3,22 @@ import { CreateComponentType } from '@/packages/index.d'
import { VideoConfig } from './index'
import cloneDeep from 'lodash/cloneDeep'
+export const VideoList = [
+ { label: '数字楼宇', value: 'https://video.699pic.com/videos/76/09/36/b_D4DKnb48qdCI1631760936.mp4' },
+ { label: '旋转魔方', value: 'https://video.699pic.com/videos/90/02/69/b_YjJAJZMT6vRK1554900269.mp4' },
+ { label: '旋转地球', value: 'https://video.699pic.com/videos/32/13/12/b_7dng21IHECP51553321312.mp4' },
+ { label: '声音示例', value: 'https://video.699pic.com/videos/80/62/39/a_qmbxMqNvK9jr1583806239.mp4' }
+]
+
export const option = {
// 视频路径
dataset: '',
- // 适应方式
- fit: 'contain',
- // 圆角
- borderRadius: 0,
- // 透明度
- opacity: 1
+ // 循环播放
+ loop: true,
+ // 自动播放
+ autoplay: true,
+ // 静音
+ muted: true
}
export default class Config extends PublicConfigClass implements CreateComponentType {
diff --git a/src/packages/components/Informations/Mores/Video/config.vue b/src/packages/components/Informations/Mores/Video/config.vue
index 7ece81b8..512fc26a 100644
--- a/src/packages/components/Informations/Mores/Video/config.vue
+++ b/src/packages/components/Informations/Mores/Video/config.vue
@@ -1,26 +1,40 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<!-- eslint-disable vue/no-mutating-props -->
<template>
- <collapse-item name="属性" :expanded="true">
- <setting-item-box name="路径" :alone="true">
- <setting-item>
+ <collapse-item name="视频" expanded>
+ <setting-item-box name="源" alone>
+ <setting-item name="自定义视频源">
<n-input v-model:value="optionData.dataset" size="small"></n-input>
</setting-item>
- <setting-item>
- <n-upload action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f" @finish="handleFinish">
+ <setting-item name="使用内置视频">
+ <n-select
+ v-model:value="optionData.dataset"
+ size="small"
+ placeholder="自定义或选择内置视频"
+ clearable
+ :options="VideoList"
+ ></n-select>
+ </setting-item>
+ <!-- <setting-item>
+ <n-upload
+ action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+ accept="video/*"
+ @finish="finishHandleFinish"
+ >
<n-button size="small">本地上传</n-button>
</n-upload>
- </setting-item>
+ </setting-item> -->
</setting-item-box>
- <setting-item-box name="样式">
- <setting-item name="类型">
- <n-select v-model:value="optionData.fit" size="small" :options="fitList"></n-select>
+
+ <setting-item-box name="控制">
+ <setting-item>
+ <n-checkbox v-model:checked="optionData.autoplay" size="small">自动播放</n-checkbox>
</setting-item>
- <setting-item name="圆角">
- <n-input-number
- v-model:value="optionData.borderRadius"
- size="small"
- :min="0"
- placeholder="圆角"
- ></n-input-number>
+ <setting-item>
+ <n-checkbox v-model:checked="optionData.loop" size="small">循环播放</n-checkbox>
+ </setting-item>
+ <setting-item>
+ <n-checkbox v-model:checked="optionData.muted" size="small">静音</n-checkbox>
</setting-item>
</setting-item-box>
</collapse-item>
@@ -28,9 +42,10 @@
<script setup lang="ts">
import { PropType } from 'vue'
-import { option } from './config'
+import { option, VideoList } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+// eslint-disable-next-line no-unused-vars
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
@@ -38,27 +53,8 @@ const props = defineProps({
}
})
-// 适应类型
-const fitList = [
- {
- value: 'fill',
- label: 'fill'
- },
- {
- value: 'contain',
- label: 'contain'
- },
- {
- value: 'cover',
- label: 'cover'
- },
- {
- value: 'scale-down',
- label: 'scale-down'
- },
- {
- value: 'none',
- label: 'none'
- }
-]
+// eslint-disable-next-line no-unused-vars
+const finishHandleFinish = () => {
+ // console.log()
+}
</script>
diff --git a/src/packages/components/Informations/Mores/Video/index.vue b/src/packages/components/Informations/Mores/Video/index.vue
index 2a4c0ac2..0e488250 100644
--- a/src/packages/components/Informations/Mores/Video/index.vue
+++ b/src/packages/components/Informations/Mores/Video/index.vue
@@ -1,25 +1,25 @@
+<!-- eslint-disable vue/multi-word-component-names -->
<template>
- <div :style="getStyle(borderRadius)">
- <video
- class="video-background"
- preload="auto"
- loop
- playsinline
- autoplay
- muted
- src="https://video.699pic.com/videos/76/09/36/b_D4DKnb48qdCI1631760936.mp4"
- :width="w"
- :height="h"
- ></video>
- </div>
+ <video
+ ref="vVideoRef"
+ class="go-video"
+ preload="auto"
+ playsinline
+ :loop="option.loop"
+ :autoplay="option.autoplay"
+ :muted="option.muted"
+ :width="w"
+ :height="h"
+ :src="option.dataset"
+ ></video>
</template>
<script setup lang="ts">
-import { PropType, shallowReactive, watch, toRefs } from 'vue'
+import { PropType, toRefs, shallowReactive, watch, ref } from 'vue'
import { useChartDataFetch } from '@/hooks'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { option } from './config'
+import { option as configOption } from './config'
const props = defineProps({
chartConfig: {
@@ -29,41 +29,40 @@ const props = defineProps({
})
const { w, h } = toRefs(props.chartConfig.attr)
-const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
+let option = shallowReactive({ ...configOption })
-const option = shallowReactive({
- dataset: ''
+// 预览更新
+const vVideoRef = ref(null)
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+ option = newData
})
-const getStyle = (radius: number) => {
- return {
- borderRadius: `${radius}px`,
- overflow: 'hidden'
- }
-}
-
// 编辑更新
watch(
- () => props.chartConfig.option.dataset,
+ () => props.chartConfig.option,
(newData: any) => {
- option.dataset = newData
+ option = newData
+ if (!vVideoRef.value) return
+ const video: any = vVideoRef.value
+ video.loop = option.loop
+ video.autoplay = option.autoplay
+ video.muted = option.muted
+
+ // 控制是否播放还是停止在第一帧
+ !option.autoplay && (video.pause(), (video.currentTime = 0))
+ option.autoplay && video.play()
},
{
immediate: true,
- deep: false
+ deep: true
}
)
-
-// 预览更新
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
- option.dataset = newData
-})
</script>
<style lang="scss" scoped>
-.video-background {
+@include go('video') {
+ display: block;
object-fit: cover;
mix-blend-mode: screen;
- opacity: 1;
}
</style>