lsc 3 months ago
parent
commit
85a9c4a9ee

+ 8 - 0
src/views/Editor/CanvasTool/WebpageInput.vue

@@ -260,6 +260,14 @@ const getTypeClass = (type: number) => {
     background-color: #9c27b0;
   }
   
+  &.type-video {
+    background-color: #f44336;
+  }
+  
+  &.type-bilibili {
+    background-color: #fb7299;
+  }
+  
   &.type-default {
     background-color: #757575;
   }

+ 33 - 2
src/views/components/element/FrameElement/index.vue

@@ -18,14 +18,37 @@
         @mousedown="$event => handleSelectElement($event)"
         @touchstart="$event => handleSelectElement($event)"
       >
-        <iframe :srcdoc="elementInfo.url" v-if="elementInfo.isHTML"
+        <!-- 视频类型(type 74):使用 video 标签 -->
+        <video 
+          v-if="elementInfo.toolType === 74"
+          :src="elementInfo.url"
+          :width="elementInfo.width"
+          :height="elementInfo.height"
+          controls
+          :style="{ width: '100%', height: '100%', objectFit: 'contain' }"
+        ></video>
+        <!-- B站视频类型(type 75):使用 iframe -->
+        <iframe 
+          v-else-if="elementInfo.toolType === 75"
+          :src="elementInfo.url"
           :width="elementInfo.width"
           :height="elementInfo.height"
           :frameborder="0" 
           :allowfullscreen="true"
           allow="camera *; microphone *; display-capture; midi; encrypted-media; fullscreen; geolocation; clipboard-read; clipboard-write; accelerometer; autoplay; gyroscope; payment; picture-in-picture; usb; xr-spatial-tracking;"
         ></iframe>
-        <iframe v-else
+        <!-- 其他类型:保持原有逻辑 -->
+        <iframe 
+          v-else-if="elementInfo.isHTML"
+          :srcdoc="elementInfo.url"
+          :width="elementInfo.width"
+          :height="elementInfo.height"
+          :frameborder="0" 
+          :allowfullscreen="true"
+          allow="camera *; microphone *; display-capture; midi; encrypted-media; fullscreen; geolocation; clipboard-read; clipboard-write; accelerometer; autoplay; gyroscope; payment; picture-in-picture; usb; xr-spatial-tracking;"
+        ></iframe>
+        <iframe 
+          v-else
           :src="elementInfo.url"
           :width="elementInfo.width"
           :height="elementInfo.height"
@@ -98,6 +121,14 @@ const handleSelectElement = (e: MouseEvent | TouchEvent, canMove = true) => {
   overflow: hidden;
   position: absolute;
 }
+.element-content video {
+  width: 100%;
+  height: 100%;
+  cursor: move;
+  object-fit: contain;
+  background-color: #000;
+  position: absolute;
+}
 .drag-handler {
   position: absolute;