@ebiz/designer-components 0.1.62 → 0.1.64

package/src/index.js

@@ -101,6 +101,7 @@ import EbizDetailView from './components/EbizDetailView.vue'
 import EbizDetailItem from './components/EbizDetailItem.vue'
 import EbizPdfViewer from './components/EbizPdfViewer.vue'
 import EbizRichTextEditor from './components/EbizRichTextEditor.vue'
+import EbizVideo from './components/EbizVideo.vue'
 
 // 导出组件
 export {
@@ -245,5 +246,7 @@ export {
   // PDF预览组件
   EbizPdfViewer,
   // 富文本编辑器组件
-  EbizRichTextEditor
+  EbizRichTextEditor,
+  // 视频播放器组件
+  EbizVideo
 }

package/src/router/index.js

@@ -395,11 +395,16 @@ const routes = [
     component: () => import('../views/EbizDetailViewDemo.vue'),
     meta: { title: 'Ebiz详情页组件示例' }
   },
-  {
-    path: '/pdf-viewer-demo',
+  {    path: '/pdf-viewer-demo',
     name: 'PdfViewerDemo',
     component: () => import('../views/PdfViewerDemo.vue'),
     meta: { title: 'EbizPdfViewer PDF预览器示例' }
+  },
+  {
+    path: '/video-demo',
+    name: 'VideoDemo',
+    component: () => import('../views/VideoDemo.vue'),
+    meta: { title: 'Ebiz视频播放器组件示例' }
   }
 ]
 
@@ -408,4 +413,4 @@ const router = createRouter({
   routes
 })
 
-export default router 
+export default router

package/src/views/Home.vue

@@ -98,7 +98,8 @@ export default {
       { path: '/mobile-meeting-room-selector', title: 'Ebiz移动端会议室选择器组件示例' },
       { path: '/file-list-demo', title: '文件列表demo' },
       { path: '/detail-view-demo', title: 'Ebiz详情页组件示例' },
-      { path: '/pdf-viewer-demo', title: 'EbizPdfViewer PDF预览器示例' }
+      { path: '/pdf-viewer-demo', title: 'EbizPdfViewer PDF预览器示例' },
+      { path: '/video-demo', title: 'Ebiz视频播放器组件示例' }
     ]
 
     return {
@@ -150,4 +151,4 @@ export default {
 .component-item:hover {
   background-color: #e6e6e6;
 }
-</style> 
+</style>

package/src/views/VideoDemo.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="video-demo-container">
+    <h1>视频播放器组件示例</h1>
+
+    <div class="demo-section">
+      <h2>基础用法</h2>
+      <div class="demo-box">
+        <EbizVideo src="https://media.w3.org/2010/05/sintel/trailer.mp4"
+          poster="https://media.w3.org/2010/05/sintel/poster.png" title="Sintel Trailer" height="360px" />
+      </div>
+      <div class="code-box">
+        <pre><code>{{ basicUsageCode }}</code></pre>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h2>自动播放（需要静音）</h2>
+      <div class="demo-box">
+        <EbizVideo src="https://media.w3.org/2010/05/sintel/trailer.mp4"
+          poster="https://media.w3.org/2010/05/sintel/poster.png" title="自动播放示例" height="360px" autoplay muted />
+      </div>
+      <div class="code-box">
+        <pre><code>{{ autoplayCode }}</code></pre>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h2>循环播放</h2>
+      <div class="demo-box">
+        <EbizVideo src="https://media.w3.org/2010/05/sintel/trailer.mp4"
+          poster="https://media.w3.org/2010/05/sintel/poster.png" title="循环播放示例" height="360px" loop />
+      </div>
+      <div class="code-box">
+        <pre><code>{{ loopCode }}</code></pre>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h2>使用原生控制栏</h2>
+      <div class="demo-box">
+        <EbizVideo src="https://media.w3.org/2010/05/sintel/trailer.mp4"
+          poster="https://media.w3.org/2010/05/sintel/poster.png" title="原生控制栏示例" height="360px" showNativeControls />
+      </div>
+      <div class="code-box">
+        <pre><code>{{ nativeControlsCode }}</code></pre>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h2>事件监听</h2>
+      <div class="demo-box">
+        <EbizVideo src="https://media.w3.org/2010/05/sintel/trailer.mp4"
+          poster="https://media.w3.org/2010/05/sintel/poster.png" title="事件监听示例" height="360px" @play="onPlay"
+          @pause="onPause" @ended="onEnded" @timeupdate="onTimeUpdate" />
+        <div class="event-log">
+          <h3>事件日志：</h3>
+          <div class="log-content">
+            <div v-for="(log, index) in eventLogs" :key="index" class="log-item">
+              {{ log }}
+            </div>
+          </div>
+          <button @click="clearLogs" class="clear-btn">清除日志</button>
+        </div>
+      </div>
+      <div class="code-box">
+        <pre><code>{{ eventsCode }}</code></pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import EbizVideo from '../components/EbizVideo.vue';
+
+// 示例代码
+const basicUsageCode = `<EbizVideo
+  src="https://media.w3.org/2010/05/sintel/trailer.mp4"
+  poster="https://media.w3.org/2010/05/sintel/poster.png"
+  title="Sintel Trailer"
+  height="360px"
+/>`;
+
+const autoplayCode = `<EbizVideo
+  src="https://media.w3.org/2010/05/sintel/trailer.mp4"
+  poster="https://media.w3.org/2010/05/sintel/poster.png"
+  title="自动播放示例"
+  height="360px"
+  autoplay
+  muted
+/>`;
+
+const loopCode = `<EbizVideo
+  src="https://media.w3.org/2010/05/sintel/trailer.mp4"
+  poster="https://media.w3.org/2010/05/sintel/poster.png"
+  title="循环播放示例"
+  height="360px"
+  loop
+/>`;
+
+const nativeControlsCode = `<EbizVideo
+  src="https://media.w3.org/2010/05/sintel/trailer.mp4"
+  poster="https://media.w3.org/2010/05/sintel/poster.png"
+  title="原生控制栏示例"
+  height="360px"
+  showNativeControls
+/>`;
+
+const eventsCode = `<template>
+  <EbizVideo
+    src="https://media.w3.org/2010/05/sintel/trailer.mp4"
+    poster="https://media.w3.org/2010/05/sintel/poster.png"
+    title="事件监听示例"
+    height="360px"
+    @play="onPlay"
+    @pause="onPause"
+    @ended="onEnded"
+    @timeupdate="onTimeUpdate"
+  />
+  <div class="event-log">
+    <h3>事件日志：</h3>
+    <div class="log-content">
+      <div v-for="(log, index) in eventLogs" :key="index" class="log-item">
+        {{ log }}
+      </div>
+    </div>
+    <button @click="clearLogs">清除日志</button>
+  </div>
+  `;
+
+
+const eventLogs = ref([]);
+
+const onPlay = () => {
+  eventLogs.value.push(`播放事件触发: ${new Date().toLocaleTimeString()}`);
+};
+
+const onPause = () => {
+  eventLogs.value.push(`暂停事件触发: ${new Date().toLocaleTimeString()}`);
+};
+
+const onEnded = () => {
+  eventLogs.value.push(`结束事件触发: ${new Date().toLocaleTimeString()}`);
+};
+
+const onTimeUpdate = (data) => {
+  // 只在整秒时记录，避免日志过多
+  if (Math.floor(data.currentTime) !== Math.floor(data.currentTime - 0.1)) {
+    eventLogs.value.push(
+      `时间更新事件: ${Math.floor(data.currentTime)}秒 / ${Math.floor(data.duration)}秒`
+    );
+  }
+};
+
+const clearLogs = () => {
+  eventLogs.value = [];
+};
+</script>
+
+<style scoped>
+.video-demo-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 28px;
+  margin-bottom: 30px;
+  color: #333;
+}
+
+h2 {
+  font-size: 20px;
+  margin-bottom: 16px;
+  color: #333;
+}
+
+.demo-section {
+  margin-bottom: 40px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.demo-box {
+  margin-bottom: 20px;
+}
+
+.code-box {
+  background-color: #f5f7fa;
+  padding: 16px;
+  border-radius: 4px;
+  overflow: auto;
+}
+
+pre {
+  margin: 0;
+  white-space: pre-wrap;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+code {
+  color: #476582;
+  font-size: 14px;
+}
+
+.event-log {
+  margin-top: 20px;
+  padding: 16px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  border: 1px solid #eee;
+}
+
+.log-content {
+  max-height: 200px;
+  overflow-y: auto;
+  margin-bottom: 10px;
+  padding: 10px;
+  background-color: #fff;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+
+.log-item {
+  padding: 4px 0;
+  border-bottom: 1px dashed #eee;
+  font-size: 14px;
+  color: #666;
+}
+
+.clear-btn {
+  padding: 6px 12px;
+  background-color: #0052d9;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.clear-btn:hover {
+  background-color: #0045b3;
+}
+</style>