@ebiz/designer-components 0.1.78 → 0.1.79

package/src/components/EbizVideo.vue

@@ -1,554 +1,554 @@
-<template>
-  <div 
-    class="ebiz-video-player" 
-    :style="{ height }"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
-    @mousemove="handleMouseMove"
-  >
-    <video
-      ref="videoRef"
-      class="ebiz-video"
-      :src="src"
-      :poster="poster"
-      :autoplay="autoplay"
-      :loop="loop"
-      :muted="muted"
-      :preload="preload"
-      :controls="showNativeControls"
-      @click="handleClickOnVideo"
-      @timeupdate="handleTimeUpdate"
-      @loadedmetadata="handleLoadedMetadata"
-      @play="handlePlay"
-      @pause="handlePause"
-      @ended="handleEnded"
-      @error="handleError"
-      @progress="handleProgress"
-      @seeking="handleSeeking"
-      @seeked="handleSeeked"
-    ></video>
-
-    <!-- 自定义控制器 -->
-    <div v-if="!showNativeControls" class="ebiz-video-controls" :class="{ 'controls-hidden': !controlsVisible }">
-      <!-- 顶部控制栏 -->
-      <div class="ebiz-video-header">
-        <div class="ebiz-video-title">{{ title }}</div>
-      </div>
-
-      <!-- 中间播放按钮 -->
-      <div v-if="!isPlaying" class="ebiz-video-center-play" @click="togglePlay">
-        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M8 5V19L19 12L8 5Z" fill="currentColor" />
-        </svg>
-      </div>
-
-      <!-- 底部控制栏 -->
-      <div class="ebiz-video-footer">
-        <!-- 进度条 -->
-        <div class="ebiz-video-progress">
-          <div
-            class="ebiz-video-progress-bar"
-            @mousedown="handleProgressMouseDown"
-          >
-            <div
-              class="ebiz-video-progress-loaded"
-              :style="{ width: loadedPercent + '%' }"
-            ></div>
-            <div
-              class="ebiz-video-progress-played"
-              :style="{ width: playedPercent + '%' }"
-            ></div>
-            <div
-              class="ebiz-video-progress-handle"
-              :style="{ left: playedPercent + '%' }"
-            ></div>
-          </div>
-        </div>
-
-        <!-- 控制按钮组 -->
-        <div class="ebiz-video-controls-buttons">
-          <div class="ebiz-video-control-button" @click="togglePlay">
-            <svg v-if="isPlaying" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M6 4H10V20H6V4ZM14 4H18V20H14V4Z" fill="currentColor" />
-            </svg>
-            <svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M8 5V19L19 12L8 5Z" fill="currentColor" />
-            </svg>
-          </div>
-
-          <div class="ebiz-video-time">
-            {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
-          </div>
-
-          <div class="ebiz-video-control-button" @click="toggleMute">
-            <svg v-if="isMuted" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.889 16H2a1 1 0 01-1-1V9a1 1 0 011-1h3.889l5.294-4.332a.5.5 0 01.817.387v15.89a.5.5 0 01-.817.387L5.89 16zm14.525-4l3.536 3.536-1.414 1.414L19 13.414l-3.536 3.536-1.414-1.414L17.586 12 14.05 8.464l1.414-1.414L19 10.586l3.536-3.536 1.414 1.414L20.414 12z" fill="currentColor" />
-            </svg>
-            <svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M5.889 16H2a1 1 0 01-1-1V9a1 1 0 011-1h3.889l5.294-4.332a.5.5 0 01.817.387v15.89a.5.5 0 01-.817.387L5.89 16zm13.517-7.926a6 6 0 010 7.852l-1.386-1.336a4 4 0 000-5.18l1.386-1.336zm2.793-2.688a10 10 0 010 13.228l-1.387-1.336a8 8 0 000-10.556l1.387-1.336z" fill="currentColor" />
-            </svg>
-          </div>
-
-          <div class="ebiz-video-control-button" @click="toggleFullscreen">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 18h-6v-2h4v-4h2v6zM4 21v-4H2v-2h6v6H4z" fill="currentColor" />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 加载中状态 -->
-    <div v-if="isLoading && !hasError" class="ebiz-video-loading">
-      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M12 2a10 10 0 110 20 10 10 0 010-20zm0 2a8 8 0 100 16 8 8 0 000-16z" fill="currentColor" opacity="0.3" />
-        <path d="M20 12a8 8 0 01-8 8V4a8 8 0 018 8z" fill="currentColor" />
-      </svg>
-    </div>
-
-    <!-- 错误状态 -->
-    <div v-if="hasError" class="ebiz-video-error">
-      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16zm-1-5h2v2h-2v-2zm0-8h2v6h-2V7z" fill="currentColor" />
-      </svg>
-      <span>视频加载失败</span>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
-
-const props = defineProps({
-  // 视频源URL
-  src: {
-    type: String,
-    required: true
-  },
-  // 封面图片URL
-  poster: {
-    type: String,
-    default: ''
-  },
-  // 视频标题
-  title: {
-    type: String,
-    default: ''
-  },
-  // 是否自动播放
-  autoplay: {
-    type: Boolean,
-    default: false
-  },
-  // 是否循环播放
-  loop: {
-    type: Boolean,
-    default: false
-  },
-  // 是否静音
-  muted: {
-    type: Boolean,
-    default: false
-  },
-  // 预加载模式
-  preload: {
-    type: String,
-    default: 'auto'
-  },
-  // 是否显示原生控制栏
-  showNativeControls: {
-    type: Boolean,
-    default: false
-  },
-  // 播放器高度
-  height: {
-    type: String,
-    default: '360px'
-  },
-  // 初始音量
-  volume: {
-    type: Number,
-    default: 1
-  },
-  // 当前播放时间（用于v-model）
-  modelValue: {
-    type: Number,
-    default: 0
-  }
-});
-
-const emit = defineEmits([
-  'update:modelValue',
-  'play',
-  'pause',
-  'ended',
-  'timeupdate',
-  'error',
-  'progress',
-  'seeking',
-  'seeked',
-  'loadedmetadata'
-]);
-
-// 状态变量
-const videoRef = ref(null);
-const isPlaying = ref(false);
-const isMuted = ref(props.muted);
-const duration = ref(0);
-const currentTime = ref(props.modelValue);
-const buffered = ref(0);
-const isLoading = ref(true);
-const hasError = ref(false);
-const controlsVisible = ref(true);
-const controlsTimeout = ref(null);
-
-// 计算属性
-const playedPercent = computed(() => {
-  if (duration.value === 0) return 0;
-  return (currentTime.value / duration.value) * 100;
-});
-
-const loadedPercent = computed(() => {
-  if (duration.value === 0) return 0;
-  return (buffered.value / duration.value) * 100;
-});
-
-// 方法
-const togglePlay = () => {
-  if (videoRef.value.paused) {
-    videoRef.value.play();
-  } else {
-    videoRef.value.pause();
-  }
-};
-
-const toggleMute = () => {
-  isMuted.value = !isMuted.value;
-  videoRef.value.muted = isMuted.value;
-};
-
-const toggleFullscreen = () => {
-  if (!document.fullscreenElement) {
-    videoRef.value.parentElement.requestFullscreen();
-  } else {
-    if (document.exitFullscreen) {
-      document.exitFullscreen();
-    }
-  }
-};
-
-const formatTime = (seconds) => {
-  if (isNaN(seconds) || seconds === Infinity) return '00:00';
-  seconds = Math.floor(seconds);
-  const minutes = Math.floor(seconds / 60);
-  seconds = seconds % 60;
-  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-};
-
-const showControls = () => {
-  controlsVisible.value = true;
-  
-  // 自动隐藏控制栏
-  if (controlsTimeout.value) {
-    clearTimeout(controlsTimeout.value);
-  }
-  
-  if (isPlaying.value) {
-    controlsTimeout.value = setTimeout(() => {
-      controlsVisible.value = false;
-    }, 3000);
-  }
-};
-
-// 进度条拖动事件处理
-const handleProgressMouseDown = (e) => {
-  const progressBar = e.currentTarget;
-  const rect = progressBar.getBoundingClientRect();
-  const offsetX = e.clientX - rect.left;
-  const percent = offsetX / rect.width;
-  const newTime = percent * duration.value;
-  
-  videoRef.value.currentTime = newTime;
-  
-  const handleMouseMove = (e) => {
-    const offsetX = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
-    const percent = offsetX / rect.width;
-    const newTime = percent * duration.value;
-    videoRef.value.currentTime = newTime;
-  };
-  
-  const handleMouseUp = () => {
-    document.removeEventListener('mousemove', handleMouseMove);
-    document.removeEventListener('mouseup', handleMouseUp);
-  };
-  
-  document.addEventListener('mousemove', handleMouseMove);
-  document.addEventListener('mouseup', handleMouseUp);
-};
-
-// 视频事件处理函数
-const handleTimeUpdate = () => {
-  currentTime.value = videoRef.value.currentTime;
-  emit('update:modelValue', currentTime.value);
-  emit('timeupdate', {
-    currentTime: currentTime.value,
-    duration: duration.value,
-    percent: playedPercent.value
-  });
-};
-
-const handleLoadedMetadata = () => {
-  duration.value = videoRef.value.duration;
-  isLoading.value = false;
-  
-  // 设置初始音量
-  videoRef.value.volume = props.volume;
-  
-  // 如果有初始时间，设置播放位置
-  if (props.modelValue > 0) {
-    videoRef.value.currentTime = props.modelValue;
-  }
-  
-  emit('loadedmetadata', {
-    duration: duration.value
-  });
-};
-
-const handlePlay = () => {
-  isPlaying.value = true;
-  showControls(); // 显示控制栏，然后自动隐藏
-  emit('play');
-};
-
-const handlePause = () => {
-  isPlaying.value = false;
-  showControls(); // 显示控制栏
-  if (controlsTimeout.value) {
-    clearTimeout(controlsTimeout.value);
-  }
-  emit('pause');
-};
-
-const handleEnded = () => {
-  isPlaying.value = false;
-  showControls(); // 显示控制栏
-  emit('ended');
-};
-
-const handleError = (e) => {
-  hasError.value = true;
-  isLoading.value = false;
-  emit('error', e);
-};
-
-const handleProgress = () => {
-  if (!videoRef.value || !videoRef.value.buffered || videoRef.value.buffered.length === 0) return;
-  
-  const bufferedEnd = videoRef.value.buffered.end(videoRef.value.buffered.length - 1);
-  buffered.value = bufferedEnd;
-  
-  emit('progress', {
-    buffered: buffered.value,
-    percent: loadedPercent.value
-  });
-};
-
-const handleSeeking = () => {
-  isLoading.value = true;
-  emit('seeking', {
-    currentTime: currentTime.value
-  });
-};
-
-const handleSeeked = () => {
-  isLoading.value = false;
-  emit('seeked', {
-    currentTime: currentTime.value
-  });
-};
-
-// 点击事件监听，用于显示/隐藏控制栏
-const handleClickOnVideo = () => {
-  if (controlsVisible.value) {
-    controlsVisible.value = false;
-  } else {
-    showControls();
-  }
-};
-
-// 鼠标事件处理函数
-const handleMouseEnter = () => {
-  // 鼠标移入时显示控制器
-  showControls();
-};
-
-const handleMouseLeave = () => {
-  // 鼠标移出时，如果视频正在播放，则隐藏控制器
-  if (isPlaying.value) {
-    controlsVisible.value = false;
-  }
-};
-
-const handleMouseMove = () => {
-  // 鼠标在视频上移动时显示控制器
-  showControls();
-};
-
-// 生命周期钩子
-onMounted(() => {
-  // 初始化组件
-});
-
-onBeforeUnmount(() => {
-  if (controlsTimeout.value) {
-    clearTimeout(controlsTimeout.value);
-  }
-});
-</script>
-
-<style scoped>
-.ebiz-video-player {
-  position: relative;
-  width: 100%;
-  background-color: #000;
-  overflow: hidden;
-  border-radius: 4px;
-}
-
-.ebiz-video {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.ebiz-video-controls {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.3) 100%);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  opacity: 1;
-  transition: opacity 0.3s ease;
-}
-
-.controls-hidden {
-  opacity: 0;
-}
-
-.ebiz-video-header {
-  padding: 16px;
-  display: flex;
-  align-items: center;
-}
-
-.ebiz-video-title {
-  color: #fff;
-  font-size: 16px;
-  text-shadow: 0 0 2px rgba(0,0,0,0.5);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ebiz-video-center-play {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: rgba(255, 255, 255, 0.8);
-  cursor: pointer;
-  z-index: 2;
-}
-
-.ebiz-video-footer {
-  padding: 16px;
-}
-
-.ebiz-video-progress {
-  margin-bottom: 16px;
-}
-
-.ebiz-video-progress-bar {
-  position: relative;
-  height: 4px;
-  background-color: rgba(255, 255, 255, 0.3);
-  border-radius: 2px;
-  cursor: pointer;
-}
-
-.ebiz-video-progress-loaded {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0.5);
-  border-radius: 2px;
-}
-
-.ebiz-video-progress-played {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  background-color: #0052d9;
-  border-radius: 2px;
-}
-
-.ebiz-video-progress-handle {
-  position: absolute;
-  top: 50%;
-  width: 12px;
-  height: 12px;
-  background-color: #fff;
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
-}
-
-.ebiz-video-controls-buttons {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: #fff;
-}
-
-.ebiz-video-control-button {
-  padding: 8px;
-  cursor: pointer;
-}
-
-.ebiz-video-time {
-  font-size: 14px;
-  color: #fff;
-  text-shadow: 0 0 2px rgba(0,0,0,0.5);
-}
-
-.ebiz-video-loading {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: #fff;
-}
-
-.ebiz-video-error {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #ff4d4f;
-}
-
-.ebiz-video-error span {
-  margin-top: 8px;
-  font-size: 14px;
-  color: #fff;
-}
+<template>
+  <div 
+    class="ebiz-video-player" 
+    :style="{ height }"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @mousemove="handleMouseMove"
+  >
+    <video
+      ref="videoRef"
+      class="ebiz-video"
+      :src="src"
+      :poster="poster"
+      :autoplay="autoplay"
+      :loop="loop"
+      :muted="muted"
+      :preload="preload"
+      :controls="showNativeControls"
+      @click="handleClickOnVideo"
+      @timeupdate="handleTimeUpdate"
+      @loadedmetadata="handleLoadedMetadata"
+      @play="handlePlay"
+      @pause="handlePause"
+      @ended="handleEnded"
+      @error="handleError"
+      @progress="handleProgress"
+      @seeking="handleSeeking"
+      @seeked="handleSeeked"
+    ></video>
+
+    <!-- 自定义控制器 -->
+    <div v-if="!showNativeControls" class="ebiz-video-controls" :class="{ 'controls-hidden': !controlsVisible }">
+      <!-- 顶部控制栏 -->
+      <div class="ebiz-video-header">
+        <div class="ebiz-video-title">{{ title }}</div>
+      </div>
+
+      <!-- 中间播放按钮 -->
+      <div v-if="!isPlaying" class="ebiz-video-center-play" @click="togglePlay">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M8 5V19L19 12L8 5Z" fill="currentColor" />
+        </svg>
+      </div>
+
+      <!-- 底部控制栏 -->
+      <div class="ebiz-video-footer">
+        <!-- 进度条 -->
+        <div class="ebiz-video-progress">
+          <div
+            class="ebiz-video-progress-bar"
+            @mousedown="handleProgressMouseDown"
+          >
+            <div
+              class="ebiz-video-progress-loaded"
+              :style="{ width: loadedPercent + '%' }"
+            ></div>
+            <div
+              class="ebiz-video-progress-played"
+              :style="{ width: playedPercent + '%' }"
+            ></div>
+            <div
+              class="ebiz-video-progress-handle"
+              :style="{ left: playedPercent + '%' }"
+            ></div>
+          </div>
+        </div>
+
+        <!-- 控制按钮组 -->
+        <div class="ebiz-video-controls-buttons">
+          <div class="ebiz-video-control-button" @click="togglePlay">
+            <svg v-if="isPlaying" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M6 4H10V20H6V4ZM14 4H18V20H14V4Z" fill="currentColor" />
+            </svg>
+            <svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M8 5V19L19 12L8 5Z" fill="currentColor" />
+            </svg>
+          </div>
+
+          <div class="ebiz-video-time">
+            {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
+          </div>
+
+          <div class="ebiz-video-control-button" @click="toggleMute">
+            <svg v-if="isMuted" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M5.889 16H2a1 1 0 01-1-1V9a1 1 0 011-1h3.889l5.294-4.332a.5.5 0 01.817.387v15.89a.5.5 0 01-.817.387L5.89 16zm14.525-4l3.536 3.536-1.414 1.414L19 13.414l-3.536 3.536-1.414-1.414L17.586 12 14.05 8.464l1.414-1.414L19 10.586l3.536-3.536 1.414 1.414L20.414 12z" fill="currentColor" />
+            </svg>
+            <svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M5.889 16H2a1 1 0 01-1-1V9a1 1 0 011-1h3.889l5.294-4.332a.5.5 0 01.817.387v15.89a.5.5 0 01-.817.387L5.89 16zm13.517-7.926a6 6 0 010 7.852l-1.386-1.336a4 4 0 000-5.18l1.386-1.336zm2.793-2.688a10 10 0 010 13.228l-1.387-1.336a8 8 0 000-10.556l1.387-1.336z" fill="currentColor" />
+            </svg>
+          </div>
+
+          <div class="ebiz-video-control-button" @click="toggleFullscreen">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 18h-6v-2h4v-4h2v6zM4 21v-4H2v-2h6v6H4z" fill="currentColor" />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 加载中状态 -->
+    <div v-if="isLoading && !hasError" class="ebiz-video-loading">
+      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 2a10 10 0 110 20 10 10 0 010-20zm0 2a8 8 0 100 16 8 8 0 000-16z" fill="currentColor" opacity="0.3" />
+        <path d="M20 12a8 8 0 01-8 8V4a8 8 0 018 8z" fill="currentColor" />
+      </svg>
+    </div>
+
+    <!-- 错误状态 -->
+    <div v-if="hasError" class="ebiz-video-error">
+      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16zm-1-5h2v2h-2v-2zm0-8h2v6h-2V7z" fill="currentColor" />
+      </svg>
+      <span>视频加载失败</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+  // 视频源URL
+  src: {
+    type: String,
+    required: true
+  },
+  // 封面图片URL
+  poster: {
+    type: String,
+    default: ''
+  },
+  // 视频标题
+  title: {
+    type: String,
+    default: ''
+  },
+  // 是否自动播放
+  autoplay: {
+    type: Boolean,
+    default: false
+  },
+  // 是否循环播放
+  loop: {
+    type: Boolean,
+    default: false
+  },
+  // 是否静音
+  muted: {
+    type: Boolean,
+    default: false
+  },
+  // 预加载模式
+  preload: {
+    type: String,
+    default: 'auto'
+  },
+  // 是否显示原生控制栏
+  showNativeControls: {
+    type: Boolean,
+    default: false
+  },
+  // 播放器高度
+  height: {
+    type: String,
+    default: '360px'
+  },
+  // 初始音量
+  volume: {
+    type: Number,
+    default: 1
+  },
+  // 当前播放时间（用于v-model）
+  modelValue: {
+    type: Number,
+    default: 0
+  }
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'play',
+  'pause',
+  'ended',
+  'timeupdate',
+  'error',
+  'progress',
+  'seeking',
+  'seeked',
+  'loadedmetadata'
+]);
+
+// 状态变量
+const videoRef = ref(null);
+const isPlaying = ref(false);
+const isMuted = ref(props.muted);
+const duration = ref(0);
+const currentTime = ref(props.modelValue);
+const buffered = ref(0);
+const isLoading = ref(true);
+const hasError = ref(false);
+const controlsVisible = ref(true);
+const controlsTimeout = ref(null);
+
+// 计算属性
+const playedPercent = computed(() => {
+  if (duration.value === 0) return 0;
+  return (currentTime.value / duration.value) * 100;
+});
+
+const loadedPercent = computed(() => {
+  if (duration.value === 0) return 0;
+  return (buffered.value / duration.value) * 100;
+});
+
+// 方法
+const togglePlay = () => {
+  if (videoRef.value.paused) {
+    videoRef.value.play();
+  } else {
+    videoRef.value.pause();
+  }
+};
+
+const toggleMute = () => {
+  isMuted.value = !isMuted.value;
+  videoRef.value.muted = isMuted.value;
+};
+
+const toggleFullscreen = () => {
+  if (!document.fullscreenElement) {
+    videoRef.value.parentElement.requestFullscreen();
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+};
+
+const formatTime = (seconds) => {
+  if (isNaN(seconds) || seconds === Infinity) return '00:00';
+  seconds = Math.floor(seconds);
+  const minutes = Math.floor(seconds / 60);
+  seconds = seconds % 60;
+  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+};
+
+const showControls = () => {
+  controlsVisible.value = true;
+  
+  // 自动隐藏控制栏
+  if (controlsTimeout.value) {
+    clearTimeout(controlsTimeout.value);
+  }
+  
+  if (isPlaying.value) {
+    controlsTimeout.value = setTimeout(() => {
+      controlsVisible.value = false;
+    }, 3000);
+  }
+};
+
+// 进度条拖动事件处理
+const handleProgressMouseDown = (e) => {
+  const progressBar = e.currentTarget;
+  const rect = progressBar.getBoundingClientRect();
+  const offsetX = e.clientX - rect.left;
+  const percent = offsetX / rect.width;
+  const newTime = percent * duration.value;
+  
+  videoRef.value.currentTime = newTime;
+  
+  const handleMouseMove = (e) => {
+    const offsetX = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
+    const percent = offsetX / rect.width;
+    const newTime = percent * duration.value;
+    videoRef.value.currentTime = newTime;
+  };
+  
+  const handleMouseUp = () => {
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  };
+  
+  document.addEventListener('mousemove', handleMouseMove);
+  document.addEventListener('mouseup', handleMouseUp);
+};
+
+// 视频事件处理函数
+const handleTimeUpdate = () => {
+  currentTime.value = videoRef.value.currentTime;
+  emit('update:modelValue', currentTime.value);
+  emit('timeupdate', {
+    currentTime: currentTime.value,
+    duration: duration.value,
+    percent: playedPercent.value
+  });
+};
+
+const handleLoadedMetadata = () => {
+  duration.value = videoRef.value.duration;
+  isLoading.value = false;
+  
+  // 设置初始音量
+  videoRef.value.volume = props.volume;
+  
+  // 如果有初始时间，设置播放位置
+  if (props.modelValue > 0) {
+    videoRef.value.currentTime = props.modelValue;
+  }
+  
+  emit('loadedmetadata', {
+    duration: duration.value
+  });
+};
+
+const handlePlay = () => {
+  isPlaying.value = true;
+  showControls(); // 显示控制栏，然后自动隐藏
+  emit('play');
+};
+
+const handlePause = () => {
+  isPlaying.value = false;
+  showControls(); // 显示控制栏
+  if (controlsTimeout.value) {
+    clearTimeout(controlsTimeout.value);
+  }
+  emit('pause');
+};
+
+const handleEnded = () => {
+  isPlaying.value = false;
+  showControls(); // 显示控制栏
+  emit('ended');
+};
+
+const handleError = (e) => {
+  hasError.value = true;
+  isLoading.value = false;
+  emit('error', e);
+};
+
+const handleProgress = () => {
+  if (!videoRef.value || !videoRef.value.buffered || videoRef.value.buffered.length === 0) return;
+  
+  const bufferedEnd = videoRef.value.buffered.end(videoRef.value.buffered.length - 1);
+  buffered.value = bufferedEnd;
+  
+  emit('progress', {
+    buffered: buffered.value,
+    percent: loadedPercent.value
+  });
+};
+
+const handleSeeking = () => {
+  isLoading.value = true;
+  emit('seeking', {
+    currentTime: currentTime.value
+  });
+};
+
+const handleSeeked = () => {
+  isLoading.value = false;
+  emit('seeked', {
+    currentTime: currentTime.value
+  });
+};
+
+// 点击事件监听，用于显示/隐藏控制栏
+const handleClickOnVideo = () => {
+  if (controlsVisible.value) {
+    controlsVisible.value = false;
+  } else {
+    showControls();
+  }
+};
+
+// 鼠标事件处理函数
+const handleMouseEnter = () => {
+  // 鼠标移入时显示控制器
+  showControls();
+};
+
+const handleMouseLeave = () => {
+  // 鼠标移出时，如果视频正在播放，则隐藏控制器
+  if (isPlaying.value) {
+    controlsVisible.value = false;
+  }
+};
+
+const handleMouseMove = () => {
+  // 鼠标在视频上移动时显示控制器
+  showControls();
+};
+
+// 生命周期钩子
+onMounted(() => {
+  // 初始化组件
+});
+
+onBeforeUnmount(() => {
+  if (controlsTimeout.value) {
+    clearTimeout(controlsTimeout.value);
+  }
+});
+</script>
+
+<style scoped>
+.ebiz-video-player {
+  position: relative;
+  width: 100%;
+  background-color: #000;
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+.ebiz-video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.ebiz-video-controls {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.3) 100%);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  opacity: 1;
+  transition: opacity 0.3s ease;
+}
+
+.controls-hidden {
+  opacity: 0;
+}
+
+.ebiz-video-header {
+  padding: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.ebiz-video-title {
+  color: #fff;
+  font-size: 16px;
+  text-shadow: 0 0 2px rgba(0,0,0,0.5);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ebiz-video-center-play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  z-index: 2;
+}
+
+.ebiz-video-footer {
+  padding: 16px;
+}
+
+.ebiz-video-progress {
+  margin-bottom: 16px;
+}
+
+.ebiz-video-progress-bar {
+  position: relative;
+  height: 4px;
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+.ebiz-video-progress-loaded {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 2px;
+}
+
+.ebiz-video-progress-played {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: #0052d9;
+  border-radius: 2px;
+}
+
+.ebiz-video-progress-handle {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  background-color: #fff;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+}
+
+.ebiz-video-controls-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #fff;
+}
+
+.ebiz-video-control-button {
+  padding: 8px;
+  cursor: pointer;
+}
+
+.ebiz-video-time {
+  font-size: 14px;
+  color: #fff;
+  text-shadow: 0 0 2px rgba(0,0,0,0.5);
+}
+
+.ebiz-video-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #fff;
+}
+
+.ebiz-video-error {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #ff4d4f;
+}
+
+.ebiz-video-error span {
+  margin-top: 8px;
+  font-size: 14px;
+  color: #fff;
+}
 </style>