feat: 自由容器增加视频背景

app/web/lib/config.ts

@@ -12,6 +12,12 @@ export const basicComponents = [
         name: '跳转链接',
         desc: '跳转链接',
         type: 'text'
+      },
+      {
+        key: 'video',
+        name: '视频背景',
+        desc: '视频背景',
+        type: 'upload'
       }
     ],
     value: {

app/web/page/editor/component/DynamicForm/component/Upload/index.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="upload">
       <div class="upload-img" v-if="img">
-        <img :src="img" v-if="isUrl">
+        <img :src="fileType === 'video' ? `${img}?vframe/jpg/offset/1` : img" v-if="isUrl">
         <cr-icon :type="img" class="upload-img-none-icon" v-else />
        <!-- <Icon type="image" size="20" class="upload-img-none-icon"></Icon> -->
         <div class="upload-img-cover">
@@ -38,7 +38,8 @@
       return {
         id: uuidv4().substr(0, 8),
         percent: 0,
-        img: this.value
+        img: this.value,
+        fileType: ''
       }
     },
     computed: {
@@ -104,17 +105,29 @@
               },
               BeforeUpload: (up, file) => {
                 const {type, size} = file;
+                console.log(type);
                 let limit = 0;
+                let fileType = '';
                 // 来自量子积木v1.5需求中的优化点
                 if (type === 'image/gif') {
                   // gif限制5M
+                  this.fileType = 'image';
                   limit = 5 * 1024 * 1024;
                    if (size > limit) {
                     this.$toast('gif图大小不允许超过5Mb');
                     return false;
                   }
+                } else if (type.toLowerCase().indexOf('video/') === 0) {
+                  // 视频文件，限制4M
+                  this.fileType = 'video';
+                  limit = 4 * 1024 * 1024;
+                  if (size > limit) {
+                    this.$toast('文件大小不允许超过4Mb');
+                    return false;
+                  }
                 } else {
                   // 其他格式限制800KB
+                  this.fileType = 'image';
                   limit = 800 * 1024;
                   if (size > limit) {
                     this.$toast('文件大小不允许超过800Kb');

app/web/page/editor/component/FreedomContainer/index.ts

@@ -84,6 +84,18 @@ export default class FreedomContainer extends Mixins(ContextMenuMixin, Transform
     });
   }
 
+  videoOnload() {
+    if (this.$refs.videoBackground) {
+      // const childEle = this.childItem.child[this.curChildIndex];
+      console.log(this.childItem);
+      const height = this.$refs.videoBackground.offsetHeight;
+      this.updateCommonStyle({ containerIndex: this.containerIndex, childIndex: this.curChildIndex, data: { ...this.childItem.commonStyle, height: +height }});
+      this.$nextTick(() => {
+        this.adjustHeight();
+      });
+    }
+  }
+
   // 获取point计算后样式
   setPointStyle() {
     this.$nextTick(() => {

app/web/page/editor/component/FreedomContainer/index.vue

 <template>
 	<div class="freedom" :ref="`freedomContainer${containerIndex}`" @click.stop="handleElementClick(containerIndex)">
+		<video width="100%" @loadeddata="videoOnload" ref="videoBackground" height="auto" style="position: absolute; top: 0; left: 0" v-if="childItem.props.video" :src="childItem.props.video" autoplay loop muted />
 		<div class="freedom-body" :data-index="containerIndex">
 			<div v-for="(item, index) in childItem.child" :style="transformStyle(item.commonStyle, 'container')" :class="['freedom-body-item', { 'Fb-item_selected': curChildIndex === index }]" :key="index" @click.stop="handleElementClick(containerIndex, index)" @mousedown.stop.prevent="mousedown(index, $event)" @contextmenu.prevent.stop="show($event, containerIndex, index)">
 				<component ref="childComponent" :style="transformStyle(item.commonStyle, 'component')" :is="item.name"  v-bind="item.props"></component>