feat: 添加视频元素

src/configs/element.ts

@@ -5,6 +5,7 @@ export const ELEMENT_TYPE_ZH = {
   line: '线条',
   chart: '图表',
   table: '表格',
+  video: '视频',
 }
 
 export const MIN_SIZE = {
@@ -13,4 +14,5 @@ export const MIN_SIZE = {
   shape: 15,
   chart: 200,
   table: 20,
+  video: 250,
 }

src/hooks/useCreateElement.ts

@@ -222,6 +222,22 @@ export default () => {
     if (data.isCurve) newElement.curve = [(start[0] + end[0]) / 2, (start[1] + end[1]) / 2]
     createElement(newElement)
   }
+  
+  /**
+   * 创建视频元素
+   * @param src 视频地址
+   */
+  const createVideoElement = (src: string) => {
+    createElement({
+      type: 'video',
+      id: createRandomCode(),
+      width: 500,
+      height: 300,
+      left: (VIEWPORT_SIZE - 500) / 2,
+      top: (VIEWPORT_SIZE * viewportRatio.value - 300) / 2,
+      src,
+    })
+  }
 
   return {
     createImageElement,
@@ -230,5 +246,6 @@ export default () => {
     createTextElement,
     createShapeElement,
     createLineElement,
+    createVideoElement,
   }
 }

src/plugins/icon.ts

@@ -84,6 +84,12 @@ import {
   AlignTextTopOne,
   AlignTextBottomOne,
   AlignTextMiddleOne,
+  Pause,
+  VolumeMute,
+  VolumeNotice,
+  VolumeSmall,
+  LoopOnce,
+  VideoTwo,
 } from '@icon-park/vue-next'
 
 export default {
@@ -95,6 +101,7 @@ export default {
     app.component('IconConnection', Connection)
     app.component('IconChartProportion', ChartProportion)
     app.component('IconInsertTable', InsertTable)
+    app.component('IconVideoTwo', VideoTwo)
 
     // 锁定与解锁
     app.component('IconLock', Lock)
@@ -195,5 +202,12 @@ export default {
     app.component('IconLogout', Logout)
     app.component('IconClear', Clear)
     app.component('IconFolderClose', FolderClose)
+
+    // 视频播放器
+    app.component('IconPause', Pause)
+    app.component('IconVolumeMute', VolumeMute)
+    app.component('IconVolumeNotice', VolumeNotice)
+    app.component('IconVolumeSmall', VolumeSmall)
+    app.component('IconLoopOnce', LoopOnce)
   }
 }

src/types/slides.ts

@@ -7,6 +7,7 @@ export const enum ElementTypes {
   LINE = 'line',
   CHART = 'chart',
   TABLE = 'table',
+  VIDEO = 'video',
 }
 
 /**
@@ -461,7 +462,23 @@ export interface PPTTableElement extends PPTBaseElement {
 }
 
 
-export type PPTElement = PPTTextElement | PPTImageElement | PPTShapeElement | PPTLineElement | PPTChartElement | PPTTableElement
+/**
+ * 视频元素
+ * 
+ * type: 元素类型（video）
+ * 
+ * src: 视频地址
+ * 
+ * poster: 预览封面
+ */
+export interface PPTVideoElement extends PPTBaseElement {
+  type: 'video';
+  src: string;
+  poster?: string;
+}
+
+
+export type PPTElement = PPTTextElement | PPTImageElement | PPTShapeElement | PPTLineElement | PPTChartElement | PPTTableElement | PPTVideoElement
 
 
 /**

src/views/Editor/Canvas/EditableElement.vue

@@ -37,6 +37,7 @@ import ShapeElement from '@/views/components/element/ShapeElement/index.vue'
 import LineElement from '@/views/components/element/LineElement/index.vue'
 import ChartElement from '@/views/components/element/ChartElement/index.vue'
 import TableElement from '@/views/components/element/TableElement/index.vue'
+import VideoElement from '@/views/components/element/VideoElement/index.vue'
 
 export default defineComponent({
   name: 'editable-element',
@@ -71,6 +72,7 @@ export default defineComponent({
         [ElementTypes.LINE]: LineElement,
         [ElementTypes.CHART]: ChartElement,
         [ElementTypes.TABLE]: TableElement,
+        [ElementTypes.VIDEO]: VideoElement,
       }
       return elementTypeMap[props.elementInfo.type] || null
     })

src/views/Editor/Canvas/Operate/VideoElementOperate.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="video-element-operate">
+    <BorderLine 
+      class="operate-border-line"
+      v-for="line in borderLines" 
+      :key="line.type" 
+      :type="line.type" 
+      :style="line.style"
+    />
+    <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
+      <ResizeHandler
+        class="operate-resize-handler" 
+        v-for="point in resizeHandlers"
+        :key="point.direction"
+        :type="point.direction"
+        :style="point.style"
+        @mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
+      />
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue'
+import { useStore } from '@/store'
+
+import { PPTShapeElement } from '@/types/slides'
+import { OperateResizeHandler } from '@/types/edit'
+import useCommonOperate from '../hooks/useCommonOperate'
+
+import ResizeHandler from './ResizeHandler.vue'
+import BorderLine from './BorderLine.vue'
+
+export default defineComponent({
+  name: 'video-element-operate',
+  inheritAttrs: false,
+  components: {
+    ResizeHandler,
+    BorderLine,
+  },
+  props: {
+    elementInfo: {
+      type: Object as PropType<PPTShapeElement>,
+      required: true,
+    },
+    isActiveGroupElement: {
+      type: Boolean,
+      required: true,
+    },
+    isMultiSelect: {
+      type: Boolean,
+      required: true,
+    },
+    scaleElement: {
+      type: Function as PropType<(e: MouseEvent, element: PPTShapeElement, command: OperateResizeHandler) => void>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const store = useStore()
+    const canvasScale = computed(() => store.state.canvasScale)
+
+    const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
+    const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
+    const { resizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
+
+    return {
+      scaleWidth,
+      resizeHandlers,
+      borderLines,
+    }
+  },
+})
+</script>

src/views/Editor/Canvas/Operate/index.vue

@@ -48,6 +48,7 @@ import ShapeElementOperate from './ShapeElementOperate.vue'
 import LineElementOperate from './LineElementOperate.vue'
 import ChartElementOperate from './ChartElementOperate.vue'
 import TableElementOperate from './TableElementOperate.vue'
+import VideoElementOperate from './VideoElementOperate.vue'
 import LinkHandler from './LinkHandler.vue'
 
 export default defineComponent({
@@ -107,6 +108,7 @@ export default defineComponent({
         [ElementTypes.LINE]: LineElementOperate,
         [ElementTypes.CHART]: ChartElementOperate,
         [ElementTypes.TABLE]: TableElementOperate,
+        [ElementTypes.VIDEO]: VideoElementOperate,
       }
       return elementTypeMap[props.elementInfo.type] || null
     })

src/views/Editor/CanvasTool/VideoInput.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="video-input">
+    <Input v-model:value="src" placeholder="请输入视频地址，e.g. https://xxx.mp4"></Input>
+    <div class="btns">
+      <Button @click="close()" style="margin-right: 10px;">取消</Button>
+      <Button type="primary" @click="intsertVideo()">确认</Button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { message } from 'ant-design-vue'
+
+export default defineComponent({
+  name: 'video-input',
+  emits: ['insert', 'close'],
+  setup(props, { emit }) {
+    const src = ref('https://www.w3school.com.cn/i/movie.ogg')
+
+    const intsertVideo = () => {
+      if (!src.value) return message.error('请先输入正确的视频地址')
+      emit('insert', src.value)
+    }
+
+    const close = () => emit('close')
+
+    return {
+      src,
+      intsertVideo,
+      close,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.video-input {
+  width: 480px;
+}
+.btns {
+  margin-top: 10px;
+  text-align: right;
+}
+</style>

src/views/Editor/CanvasTool/index.vue

@@ -53,6 +53,17 @@
           <IconInsertTable class="handler-item" />
         </Tooltip>
       </Popover>
+      <Popover trigger="click" v-model:visible="videoInputVisible">
+        <template #content>
+          <VideoInput 
+            @close="videoInputVisible = false"
+            @insert="src => { createVideoElement(src); videoInputVisible = false }"
+          />
+        </template>
+        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入视频">
+          <IconVideoTwo class="handler-item" />
+        </Tooltip>
+      </Popover>
     </div>
 
     <div class="right-handler">
@@ -80,6 +91,7 @@ import ShapePool from './ShapePool.vue'
 import LinePool from './LinePool.vue'
 import ChartPool from './ChartPool.vue'
 import TableGenerator from './TableGenerator.vue'
+import VideoInput from './VideoInput.vue'
 
 export default defineComponent({
   name: 'canvas-tool',
@@ -88,6 +100,7 @@ export default defineComponent({
     LinePool,
     ChartPool,
     TableGenerator,
+    VideoInput,
   },
   setup() {
     const store = useStore()
@@ -100,7 +113,7 @@ export default defineComponent({
     const { scaleCanvas, setCanvasPercentage } = useScaleCanvas()
     const { redo, undo } = useHistorySnapshot()
 
-    const { createImageElement, createChartElement, createTableElement } = useCreateElement()
+    const { createImageElement, createChartElement, createTableElement, createVideoElement } = useCreateElement()
 
     const insertImageElement = (files: File[]) => {
       const imageFile = files[0]
@@ -112,6 +125,7 @@ export default defineComponent({
     const linePoolVisible = ref(false)
     const chartPoolVisible = ref(false)
     const tableGeneratorVisible = ref(false)
+    const videoInputVisible = ref(false)
 
     // 绘制文字范围
     const drawText = () => {
@@ -152,11 +166,13 @@ export default defineComponent({
       linePoolVisible,
       chartPoolVisible,
       tableGeneratorVisible,
+      videoInputVisible,
       drawText,
       drawShape,
       drawLine,
       createChartElement,
       createTableElement,
+      createVideoElement,
     }
   },
 })

src/views/Editor/Toolbar/ElementAnimationPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="element-animation-panel">
     <div class="element-animation" v-if="handleElement">
-      <Popover trigger="click" v-model:visible="animationPoolVisible" v-if="handleElement.type !== 'chart'">
+      <Popover trigger="click" v-model:visible="animationPoolVisible" v-if="!['chart', 'video'].includes(handleElement.type)">
         <template #content>
           <div class="animation-pool">
             <div class="pool-type" v-for="type in animations" :key="type.name">
@@ -34,7 +34,7 @@
         </Button>
       </Popover>
       <Button class="element-animation-btn" v-else disabled>
-        <IconEffects style="margin-right: 5px;" /> 图表元素暂不支持动画
+        <IconEffects style="margin-right: 5px;" /> 该元素暂不支持动画
       </Button>
 
       <div class="duration" v-if="handleElementAnimation">

src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="video-style-panel">
+    <div class="title">视频预览封面</div>
+    <div class="background-image-wrapper">
+      <FileInput @change="files => setVideoPoster(files)">
+        <div class="background-image">
+          <div class="content" :style="{ backgroundImage: `url(${handleElement.poster})` }">
+            <IconPlus />
+          </div>
+        </div>
+      </FileInput>
+    </div>
+    <div class="row"><Button style="flex: 1;" @click="updateVideo({ poster: '' })">重置封面</Button></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import { MutationTypes, useStore } from '@/store'
+import { PPTVideoElement } from '@/types/slides'
+import { getImageDataURL } from '@/utils/image'
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+
+export default defineComponent({
+  name: 'video-style-panel',
+  setup() {
+    const store = useStore()
+    const handleElement = computed<PPTVideoElement>(() => store.getters.handleElement)
+
+    const { addHistorySnapshot } = useHistorySnapshot()
+
+    const updateVideo = (props: Partial<PPTVideoElement>) => {
+      store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
+      addHistorySnapshot()
+    }
+
+    // 设置视频预览封面
+    const setVideoPoster = (files: File[]) => {
+      const imageFile = files[0]
+      if (!imageFile) return
+      getImageDataURL(imageFile).then(dataURL => updateVideo({ poster: dataURL }))
+    }
+
+    return {
+      handleElement,
+      updateVideo,
+      setVideoPoster,
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.title {
+  margin-bottom: 10px;
+}
+.background-image-wrapper {
+  margin-bottom: 10px;
+}
+.background-image {
+  height: 0;
+  padding-bottom: 56.25%;
+  border: 1px dashed $borderColor;
+  border-radius: $borderRadius;
+  position: relative;
+  transition: all $transitionDelay;
+
+  &:hover {
+    border-color: $themeColor;
+    color: $themeColor;
+  }
+
+  .content {
+    @include absolute-0();
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    cursor: pointer;
+  }
+}
+</style>

src/views/Editor/Toolbar/ElementStylePanel/index.vue

@@ -18,6 +18,7 @@ import ShapeStylePanel from './ShapeStylePanel.vue'
 import LineStylePanel from './LineStylePanel.vue'
 import ChartStylePanel from './ChartStylePanel/index.vue'
 import TableStylePanel from './TableStylePanel.vue'
+import VideoStylePanel from './VideoStylePanel.vue'
 
 export default defineComponent({
   name: 'element-style-panel',
@@ -35,6 +36,7 @@ export default defineComponent({
         [ElementTypes.LINE]: LineStylePanel,
         [ElementTypes.CHART]: ChartStylePanel,
         [ElementTypes.TABLE]: TableStylePanel,
+        [ElementTypes.VIDEO]: VideoStylePanel,
       }
       return panelMap[handleElement.value.type] || null
     })

src/views/Screen/ScreenElement.vue

@@ -30,6 +30,7 @@ import BaseShapeElement from '@/views/components/element/ShapeElement/BaseShapeE
 import BaseLineElement from '@/views/components/element/LineElement/BaseLineElement.vue'
 import ScreenChartElement from '@/views/components/element/ChartElement/ScreenChartElement.vue'
 import BaseTableElement from '@/views/components/element/TableElement/BaseTableElement.vue'
+import ScreenVideoElement from '@/views/components/element/VideoElement/ScreenVideoElement.vue'
 
 export default defineComponent({
   name: 'screen-element',
@@ -56,6 +57,7 @@ export default defineComponent({
         [ElementTypes.LINE]: BaseLineElement,
         [ElementTypes.CHART]: ScreenChartElement,
         [ElementTypes.TABLE]: BaseTableElement,
+        [ElementTypes.VIDEO]: ScreenVideoElement,
       }
       return elementTypeMap[props.elementInfo.type] || null
     })

src/views/components/ThumbnailSlide/ThumbnailElement.vue

@@ -24,6 +24,7 @@ import BaseShapeElement from '@/views/components/element/ShapeElement/BaseShapeE
 import BaseLineElement from '@/views/components/element/LineElement/BaseLineElement.vue'
 import BaseChartElement from '@/views/components/element/ChartElement/BaseChartElement.vue'
 import BaseTableElement from '@/views/components/element/TableElement/BaseTableElement.vue'
+import BaseVideoElement from '@/views/components/element/VideoElement/BaseVideoElement.vue'
 
 export default defineComponent({
   name: 'base-element',
@@ -46,6 +47,7 @@ export default defineComponent({
         [ElementTypes.LINE]: BaseLineElement,
         [ElementTypes.CHART]: BaseChartElement,
         [ElementTypes.TABLE]: BaseTableElement,
+        [ElementTypes.VIDEO]: BaseVideoElement,
       }
       return elementTypeMap[props.elementInfo.type] || null
     })

src/views/components/element/VideoElement/BaseVideoElement.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="base-element-video"
+    :style="{
+      top: elementInfo.top + 'px',
+      left: elementInfo.left + 'px',
+      width: elementInfo.width + 'px',
+      height: elementInfo.height + 'px',
+    }"
+  >
+    <div class="element-content" :style="{ backgroundImage: `url(${elementInfo.poster})` }">
+      <IconPlayOne class="icon" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { PPTTableElement } from '@/types/slides'
+
+export default defineComponent({
+  name: 'base-element-video',
+  props: {
+    elementInfo: {
+      type: Object as PropType<PPTTableElement>,
+      required: true,
+    },
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.base-element-video {
+  position: absolute;
+}
+
+.element-content {
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.icon {
+  font-size: 140px;
+  color: #aaa;
+}
+</style>

src/views/components/element/VideoElement/ScreenVideoElement.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="screen-element-video"
+    :style="{
+      top: elementInfo.top + 'px',
+      left: elementInfo.left + 'px',
+      width: elementInfo.width + 'px',
+      height: elementInfo.height + 'px',
+    }"
+  >
+    <div class="element-content">
+      <VideoPlayer
+        :width="elementInfo.width"
+        :height="elementInfo.height"
+        :src="elementInfo.src" 
+        :poster="elementInfo.poster"  
+        :scale="scale" 
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, PropType, Ref, ref } from 'vue'
+import { PPTTableElement } from '@/types/slides'
+
+import VideoPlayer from './VideoPlayer/index.vue'
+
+export default defineComponent({
+  name: 'screen-element-video',
+  components: {
+    VideoPlayer,
+  },
+  props: {
+    elementInfo: {
+      type: Object as PropType<PPTTableElement>,
+      required: true,
+    },
+  },
+  setup() {
+    const scale: Ref<number> = inject('slideScale') || ref(1)
+
+    return {
+      scale,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.screen-element-video {
+  position: absolute;
+}
+
+.element-content {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/components/element/VideoElement/VideoPlayer/index.vue

@@ -0,0 +1,381 @@
+<template>
+  <div 
+    class="player"
+    :class="{ 'hide-controller': hideController }" 
+    :style="{
+      width: width * scale + 'px',
+      height: height * scale + 'px',
+      transform: `scale(${1 / scale})`,
+    }"
+    ref="containerRef"
+    @mousemove="autoHideController()"
+    @click="autoHideController()"
+  >
+    <div class="video-wrap" @click="toggle()">
+      <video
+        class="video"
+        ref="videoRef"
+        :src="src"
+        :poster="poster"
+        webkit-playsinline
+        playsinline
+        @durationchange="handleDurationchange()"
+        @timeupdate="handleTimeupdate()"
+        @ended="handleEnded()"
+        @progress="handleProgress()"
+        @play="autoHideController()"
+        @pause="autoHideController()"
+        @error="handleError()"
+      ></video>
+      <div class="bezel">
+        <span class="bezel-icon" :class="{ 'bezel-transition': bezelTransition }" @animationend="bezelTransition = false">
+          <IconPause v-if="paused" />
+          <IconPlayOne v-else />
+        </span>
+      </div>
+    </div>
+
+    <div class="controller-mask"></div>
+    <div class="controller">
+      <div class="icons icons-left">
+        <div class="icon play-icon" @click="toggle()">
+          <span class="icon-content">
+            <IconPlayOne v-if="paused" />
+            <IconPause v-else />
+          </span>
+        </div>
+        <div class="volume">
+          <div class="icon volume-icon" @click="toggleVolume()">
+            <span class="icon-content">
+              <IconVolumeMute v-if="volume === 0" />
+              <IconVolumeNotice v-else-if="volume === 1" />
+              <IconVolumeSmall v-else />
+            </span>
+          </div>
+          <div
+            class="volume-bar-wrap"
+            @mousedown="$event => handleMousedownVolumeBar($event)"
+            @touchstart="$event => handleMousedownVolumeBar($event)"
+            @click="$event => handleClickVolumeBar($event)"
+          >
+            <div class="volume-bar" ref="volumeBarRef">
+              <div class="volume-bar-inner" :style="{ width: volumeBarWidth }">
+                <span class="thumb"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <span class="time">
+          <span class="ptime">{{ptime}}</span> / <span class="dtime">{{dtime}}</span>
+        </span>
+      </div>
+
+      <div class="icons icons-right">
+        <div class="loop" @click="toggleLoop()">
+          <div class="icon loop-icon" :class="{ 'active': loop }">
+            <span class="icon-content"><IconLoopOnce /></span>
+          </div>
+        </div>
+      </div>
+
+      <div 
+        class="bar-wrap"
+        ref="playBarWrap"
+        @mousedown="$event => handleMousedownPlayBar($event)"
+        @touchstart="$event => handleMousedownPlayBar($event)"
+        @mousemove="$event => handleMousemovePlayBar($event)"
+        @mouseenter="playBarTimeVisible = true"
+        @mouseleave="playBarTimeVisible = false"
+      >
+        <div class="bar-time" :class="{ 'hidden': !playBarTimeVisible }" :style="{ left: playBarTimeLeft }">{{playBarTime}}</div>
+        <div class="bar">
+          <div class="loaded" :style="{ width: loadedBarWidth }"></div>
+          <div class="played" :style="{ width: playedBarWidth }">
+            <span class="thumb"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue'
+import useMSE from './useMSE'
+import { message } from 'ant-design-vue'
+
+const secondToTime = (second = 0) => {
+  if (second === 0 || isNaN(second)) return '00:00'
+
+  const add0 = (num: number) => (num < 10 ? '0' + num : '' + num)
+  const hour = Math.floor(second / 3600)
+  const min = Math.floor((second - hour * 3600) / 60)
+  const sec = Math.floor(second - hour * 3600 - min * 60)
+  return (hour > 0 ? [hour, min, sec] : [min, sec]).map(add0).join(':')
+}
+
+const getBoundingClientRectViewLeft = (element: HTMLElement) => {
+  return element.getBoundingClientRect().left
+}
+
+export default defineComponent({
+  name: 'Player',
+  props: {
+    width: {
+      type: Number,
+      required: true,
+    },
+    height: {
+      type: Number,
+      required: true,
+    },
+    src: {
+      type: String,
+      required: true,
+    },
+    poster: {
+      type: String,
+      default: '',
+    },
+    scale: {
+      type: Number,
+      default: 1,
+    },
+  },
+  setup(props) {
+    const containerRef = ref<HTMLElement>()
+    const videoRef = ref<HTMLVideoElement>()
+    const playBarWrap = ref<HTMLElement>()
+    const volumeBarRef = ref<HTMLElement>()
+
+    const volume = ref(0.5)
+    const paused = ref(true)
+    const currentTime = ref(0)
+    const duration = ref(0)
+    const loaded = ref(0)
+    const loop = ref(false)
+    const bezelTransition = ref(false)
+
+    const playBarTimeVisible = ref(false)
+    const playBarTime = ref('00:00')
+    const playBarTimeLeft = ref('0')
+
+    const ptime = computed(() => secondToTime(currentTime.value))
+    const dtime = computed(() => secondToTime(duration.value))
+    const playedBarWidth = computed(() => currentTime.value / duration.value * 100 + '%')
+    const loadedBarWidth = computed(() => loaded.value / duration.value * 100 + '%')
+    const volumeBarWidth = computed(() => volume.value * 100 + '%')
+
+    const seek = (time: number) => {
+      if (!videoRef.value) return
+
+      time = Math.max(time, 0)
+      time = Math.min(time, duration.value)
+
+      videoRef.value.currentTime = time
+      currentTime.value = time
+    }
+
+    const play = () => {
+      if (!videoRef.value) return
+
+      paused.value = false
+      videoRef.value.play()
+      bezelTransition.value = true
+    }
+
+    const pause = () => {
+      if (!videoRef.value) return
+
+      paused.value = true
+      videoRef.value.pause()
+      bezelTransition.value = true
+    }
+
+    const toggle = () => {
+      if (paused.value) play() 
+      else pause()
+    }
+
+    const setVolume = (percentage: number) => {
+      if (!videoRef.value) return
+
+      percentage = Math.max(percentage, 0)
+      percentage = Math.min(percentage, 1)
+
+      videoRef.value.volume = percentage
+      volume.value = percentage
+      if (videoRef.value.muted && percentage !== 0) videoRef.value.muted = false
+    }
+
+    const handleDurationchange = () => {
+      duration.value = videoRef.value?.duration || 0
+    }
+
+    const handleTimeupdate = () => {
+      currentTime.value = videoRef.value?.currentTime || 0
+    }
+
+    const handleEnded = () => {
+      if (!loop.value) pause()
+      else {
+        seek(0)
+        play()
+      }
+    }
+
+    const handleProgress = () => {
+      loaded.value = videoRef.value?.buffered.length ? videoRef.value.buffered.end(videoRef.value.buffered.length - 1) : 0
+    }
+
+    const handleError = () => message.error('视频加载失败')
+
+    const thumbMove = (e: MouseEvent | TouchEvent) => {
+      if (!videoRef.value || !playBarWrap.value) return
+      const clientX = 'clientX' in e ? e.clientX : e.changedTouches[0].clientX
+      let percentage = (clientX - getBoundingClientRectViewLeft(playBarWrap.value)) / playBarWrap.value.clientWidth
+      percentage = Math.max(percentage, 0)
+      percentage = Math.min(percentage, 1)
+      const time = percentage * duration.value
+
+      videoRef.value.currentTime = time
+      currentTime.value = time
+    }
+
+    const thumbUp = (e: MouseEvent | TouchEvent) => {
+      if (!videoRef.value || !playBarWrap.value) return
+
+      const clientX = 'clientX' in e ? e.clientX : e.changedTouches[0].clientX
+      let percentage = (clientX - getBoundingClientRectViewLeft(playBarWrap.value)) / playBarWrap.value.clientWidth
+      percentage = Math.max(percentage, 0)
+      percentage = Math.min(percentage, 1)
+      const time = percentage * duration.value
+
+      videoRef.value.currentTime = time
+      currentTime.value = time
+
+      document.removeEventListener('mousemove', thumbMove)
+      document.removeEventListener('touchmove', thumbMove)
+      document.removeEventListener('mouseup', thumbUp)
+      document.removeEventListener('touchend', thumbUp)
+    }
+
+    const handleMousedownPlayBar = () => {
+      document.addEventListener('mousemove', thumbMove)
+      document.addEventListener('touchmove', thumbMove)
+      document.addEventListener('mouseup', thumbUp)
+      document.addEventListener('touchend', thumbUp)
+    }
+
+    const volumeMove = (e: MouseEvent | TouchEvent) => {
+      if (!volumeBarRef.value) return
+      const clientX = 'clientX' in e ? e.clientX : e.changedTouches[0].clientX
+      const percentage = (clientX - getBoundingClientRectViewLeft(volumeBarRef.value) - 5.5) / 35
+      setVolume(percentage)
+    }
+
+    const volumeUp = () => {
+      document.removeEventListener('mousemove', volumeMove)
+      document.removeEventListener('touchmove', volumeMove)
+      document.removeEventListener('mouseup', volumeUp)
+      document.removeEventListener('touchend', volumeUp)
+    }
+
+    const handleMousedownVolumeBar = () => {
+      document.addEventListener('mousemove', volumeMove)
+      document.addEventListener('touchmove', volumeMove)
+      document.addEventListener('mouseup', volumeUp)
+      document.addEventListener('touchend', volumeUp)
+    }
+
+    const handleClickVolumeBar = (e: MouseEvent) => {
+      if (!volumeBarRef.value) return
+      const percentage = (e.clientX - getBoundingClientRectViewLeft(volumeBarRef.value) - 5.5) / 35
+      setVolume(percentage)
+    }
+
+    const handleMousemovePlayBar = (e: MouseEvent) => {
+      if (duration.value && playBarWrap.value) {
+        const px = playBarWrap.value.getBoundingClientRect().left
+        const tx = e.clientX - px
+        if (tx < 0 || tx > playBarWrap.value.offsetWidth) return
+
+        const time = duration.value * (tx / playBarWrap.value.offsetWidth)
+        playBarTimeLeft.value = `${tx - (time >= 3600 ? 25 : 20)}px`
+        playBarTime.value = secondToTime(time)
+        playBarTimeVisible.value = true
+      }
+    }
+
+    const toggleVolume = () => {
+      if (!videoRef.value) return
+
+      if (videoRef.value.muted) {
+        videoRef.value.muted = false
+        setVolume(0.5)
+      }
+      else {
+        videoRef.value.muted = true
+        setVolume(0)
+      }
+    }
+
+    const toggleLoop = () => {
+      loop.value = !loop.value
+    }
+
+    const autoHideControllerTimer = ref(-1)
+    const hideController = ref(false)
+    const autoHideController = () => {
+      hideController.value = false
+      clearTimeout(autoHideControllerTimer.value)
+      autoHideControllerTimer.value = setTimeout(() => {
+        if (videoRef.value?.played.length) hideController.value = true
+      }, 3000)
+    }
+    
+    useMSE(props.src, videoRef)
+
+    return {
+      containerRef,
+      videoRef,
+      playBarWrap,
+      volumeBarRef,
+      volume,
+      loop,
+      paused,
+      ptime,
+      dtime,
+      playBarTime,
+      playBarTimeVisible,
+      playBarTimeLeft,
+      playedBarWidth,
+      loadedBarWidth,
+      volumeBarWidth,
+      hideController,
+      bezelTransition,
+      seek,
+      play,
+      pause,
+      toggle,
+      setVolume,
+      handleDurationchange,
+      handleTimeupdate,
+      handleEnded,
+      handleProgress,
+      handleMousedownPlayBar,
+      handleMousedownVolumeBar,
+      handleClickVolumeBar,
+      handleMousemovePlayBar,
+      toggleVolume,
+      toggleLoop,
+      autoHideController,
+      handleError,
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>

src/views/components/element/VideoElement/VideoPlayer/style.scss

@@ -0,0 +1,353 @@
+// player
+.player {
+  position: relative;
+  overflow: hidden;
+  user-select: none;
+  line-height: 1;
+  transform-origin: 0 0;
+
+  &.playing {
+    @media (min-width: 900px) {
+      .controller-mask {
+        opacity: 0;
+      }
+      .controller {
+        opacity: 0;
+      }
+
+      &:hover {
+        .controller-mask {
+          opacity: 1;
+        }
+        .controller {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  &.loading {
+    .bezel .diplayer-loading-icon {
+      display: block;
+    }
+  }
+
+  &.hide-controller {
+    cursor: none;
+
+    .controller-mask {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+    .controller {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+  }
+}
+
+.video-wrap {
+  position: relative;
+  background: #000;
+  font-size: 0;
+  width: 100%;
+  height: 100%;
+
+  .video {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// controller
+.controller-mask {
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
+  height: 98px;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  transition: all 0.3s ease;
+}
+.controller {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 41px;
+  padding: 0 20px;
+  user-select: none;
+  transition: all 0.3s ease;
+
+  .bar-wrap {
+    padding: 5px 0;
+    cursor: pointer;
+    position: absolute;
+    bottom: 33px;
+    width: calc(100% - 40px);
+    height: 3px;
+
+    &:hover .bar .played .thumb {
+      transform: scale(1);
+    }
+
+    .bar-time {
+      position: absolute;
+      left: 0;
+      top: -20px;
+      border-radius: 4px;
+      padding: 5px 7px;
+      background-color: rgba(0, 0, 0, 0.62);
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      opacity: 1;
+      transition: opacity 0.1s ease-in-out;
+      word-wrap: normal;
+      word-break: normal;
+      z-index: 2;
+      pointer-events: none;
+
+      &.hidden {
+        opacity: 0;
+      }
+    }
+    .bar {
+      position: relative;
+      height: 3px;
+      width: 100%;
+      background: rgba(255, 255, 255, 0.2);
+      cursor: pointer;
+
+      .loaded {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        background: rgba(255, 255, 255, 0.4);
+        height: 3px;
+        transition: all 0.5s ease;
+        will-change: width;
+      }
+      .played {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        height: 3px;
+        will-change: width;
+        background-color: $themeColor;
+
+        .thumb {
+          position: absolute;
+          top: 0;
+          right: 5px;
+          margin-top: -4px;
+          margin-right: -10px;
+          height: 11px;
+          width: 11px;
+          border-radius: 50%;
+          cursor: pointer;
+          transition: all 0.3s ease-in-out;
+          transform: scale(0);
+          background-color: $themeColor;
+        }
+      }
+    }
+  }
+  .icons {
+    height: 38px;
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+
+    &.icons-right {
+      right: 8px;
+    }
+    .time {
+      line-height: 38px;
+      color: #eee;
+      text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+      vertical-align: middle;
+      font-size: 13px;
+      cursor: default;
+    }
+    .icon {
+      width: 40px;
+      height: 100%;
+      position: relative;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      font-size: 22px;
+
+      &.play-icon {
+        font-size: 26px;
+      }
+
+      .icon-content {
+        transition: all 0.2s ease-in-out;
+        opacity: 0.8;
+        color: #fff;
+      }
+      &.active .icon-content {
+        color: $themeColor;
+        opacity: 1;
+      }
+      &:hover .icon-content {
+        opacity: 1;
+      }
+    }
+    .volume {
+      height: 100%;
+      position: relative;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        .volume-bar-wrap .volume-bar {
+          width: 45px;
+        }
+        .volume-bar-wrap .volume-bar .volume-bar-inner .thumb {
+          transform: scale(1);
+        }
+      }
+      &.volume-active {
+        .volume-bar-wrap .volume-bar {
+          width: 45px;
+        }
+        .volume-bar-wrap .volume-bar .volume-bar-inner .thumb {
+          transform: scale(1);
+        }
+      }
+    }
+    .volume-bar-wrap {
+      display: inline-block;
+      margin: 0 15px 0 -5px;
+      vertical-align: middle;
+      height: 100%;
+    }
+    .volume-bar {
+      position: relative;
+      top: 17px;
+      width: 0;
+      height: 3px;
+      background: #aaa;
+      transition: all 0.3s ease-in-out;
+
+      .volume-bar-inner {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 100%;
+        transition: all 0.1s ease;
+        will-change: width;
+        background-color: $themeColor;
+
+        .thumb {
+          position: absolute;
+          top: 0;
+          right: 5px;
+          margin-top: -4px;
+          margin-right: -10px;
+          height: 11px;
+          width: 11px;
+          border-radius: 50%;
+          cursor: pointer;
+          transition: all 0.3s ease-in-out;
+          transform: scale(0);
+          background-color: $themeColor;
+        }
+      }
+    }
+    .loop {
+      display: inline-block;
+      height: 100%;
+    }
+  }
+}
+
+// bezel
+.bezel {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  font-size: 22px;
+  color: #fff;
+  pointer-events: none;
+
+  .bezel-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -26px 0 0 -26px;
+    height: 52px;
+    width: 52px;
+    padding: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    opacity: 0;
+    pointer-events: none;
+    font-size: 40px;
+
+    &.bezel-transition {
+      animation: bezel-hide 0.5s linear;
+    }
+
+    @keyframes bezel-hide {
+      from {
+        opacity: 1;
+        transform: scale(1);
+      }
+      to {
+        opacity: 0;
+        transform: scale(2);
+      }
+    }
+  }
+  .loading-icon {
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -18px 0 0 -18px;
+    height: 36px;
+    width: 36px;
+    pointer-events: none;
+
+    .loading-hide {
+      display: none;
+    }
+    .loading-dot {
+      animation: loading-dot-fade 0.8s ease infinite;
+      opacity: 0;
+      transform-origin: 4px 4px;
+
+      @for $i from 7 through 1 {
+        &.loading-dot-#{$i} {
+          animation-delay: 0.1s * $i;
+        }
+      }
+    }
+    @keyframes loading-dot-fade {
+      0% {
+        opacity: 0.7;
+        transform: scale(1.2, 1.2);
+      }
+      50% {
+        opacity: 0.25;
+        transform: scale(0.9, 0.9);
+      }
+      to {
+        opacity: 0.25;
+        transform: scale(0.85, 0.85);
+      }
+    }
+  }
+}

src/views/components/element/VideoElement/VideoPlayer/useMSE.ts

@@ -0,0 +1,41 @@
+/* eslint-disable */
+
+import { onMounted, Ref } from 'vue'
+
+export default (
+  src: string,
+  videoRef: Ref<HTMLVideoElement | undefined>,
+) => {
+  onMounted(() => {
+    if (!videoRef.value) return
+
+    let type = 'normal'
+    if (/m3u8(#|\?|$)/i.exec(src)) type = 'hls'
+    else if (/.flv(#|\?|$)/i.exec(src)) type = 'flv'
+
+    if (videoRef.value && type === 'hls' && (videoRef.value.canPlayType('application/x-mpegURL') || videoRef.value.canPlayType('application/vnd.apple.mpegURL'))) {
+      type = 'normal'
+    }
+
+    if (type === 'hls') {
+      const Hls = (window as any).Hls
+      
+      if (Hls && Hls.isSupported()) {
+        const hls = new Hls()
+        hls.loadSource(src)
+        hls.attachMedia(videoRef.value)
+      }
+    }
+    else if (type === 'flv') {
+      const flvjs = (window as any).flvjs
+      if (flvjs && flvjs.isSupported()) {
+        const flvPlayer = flvjs.createPlayer({
+          type: 'flv',
+          url: src,
+        })
+        flvPlayer.attachMediaElement(videoRef.value)
+        flvPlayer.load()
+      }
+    }
+  })
+}

src/views/components/element/VideoElement/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="editable-element-video"
+    :class="{ 'lock': elementInfo.lock }"
+    :style="{
+      top: elementInfo.top + 'px',
+      left: elementInfo.left + 'px',
+      width: elementInfo.width + 'px',
+      height: elementInfo.height + 'px',
+    }"
+  >
+    <div 
+      class="element-content" 
+      v-contextmenu="contextmenus" 
+      @mousedown="$event => handleSelectElement($event, false)"
+    >
+      <VideoPlayer
+        :width="elementInfo.width"
+        :height="elementInfo.height"
+        :src="elementInfo.src" 
+        :poster="elementInfo.poster"  
+        :scale="scale" 
+      />
+      <div 
+        :class="['handler-border', item]" 
+        v-for="item in ['t', 'b', 'l', 'r']" 
+        :key="item"
+        @mousedown="$event => handleSelectElement($event)"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue'
+import { useStore } from '@/store'
+import { PPTTableElement } from '@/types/slides'
+import { ContextmenuItem } from '@/components/Contextmenu/types'
+
+import VideoPlayer from './VideoPlayer/index.vue'
+
+export default defineComponent({
+  name: 'editable-element-video',
+  components: {
+    VideoPlayer,
+  },
+  props: {
+    elementInfo: {
+      type: Object as PropType<PPTTableElement>,
+      required: true,
+    },
+    selectElement: {
+      type: Function as PropType<(e: MouseEvent, element: PPTTableElement, canMove?: boolean) => void>,
+      required: true,
+    },
+    contextmenus: {
+      type: Function as PropType<() => ContextmenuItem[]>,
+    },
+  },
+  setup(props) {
+    const store = useStore()
+    const scale = computed(() => store.state.canvasScale)
+
+    const handleSelectElement = (e: MouseEvent, canMove = true) => {
+      if (props.elementInfo.lock) return
+      e.stopPropagation()
+
+      props.selectElement(e, props.elementInfo, canMove)
+    }
+
+    return {
+      scale,
+      handleSelectElement,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.editable-element-video {
+  position: absolute;
+
+  &.lock .handler-border {
+    cursor: default;
+  }
+}
+
+.element-content {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.handler-border {
+  position: absolute;
+  cursor: move;
+
+  &.t {
+    width: 100%;
+    height: 20px;
+    top: 0;
+    left: 0;
+  }
+  &.b {
+    width: 100%;
+    height: 5px;
+    bottom: 0;
+    left: 0;
+  }
+  &.l {
+    width: 10px;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+  &.r {
+    width: 10px;
+    height: 100%;
+    right: 0;
+    top: 0;
+  }
+}
+</style>