初始化

2025-11-08 10:38:36 +08:00
commit 3beeec7296
1626 changed files with 198488 additions and 0 deletions
--- a/frontend/packages/BasicComponents/Video/index.vue
+++ b/frontend/packages/BasicComponents/Video/index.vue
@@ -0,0 +1,127 @@
+<template>
+  <div
+    style="width: 100%; height: 100%"
+    class="bs-design-wrap"
+  >
+    <video-player
+      ref="videoPlayer1"
+      :options="videoOptions"
+      class="vjs-custom-skin videoPlayer"
+      :playsinline="true"
+    />
+  </div>
+</template>
+<script>
+import { videoPlayer } from 'vue-video-player'
+import 'video.js/dist/video-js.css'
+import 'videojs-contrib-hls'
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'Video',
+  components: { videoPlayer },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {},
+  beforeDestroy () {
+    this.$refs.videoPlayer1.dispose()
+  },
+  data () {
+    return {
+      // TODO 这里介绍各个参数的意义
+      videoOptions: {
+        live: true,
+        // 浏览器准备好时开始回放
+        autoplay: false,
+        // true：默认视频播放无声音，需要手动开启声音
+        muted: false,
+        // 播放速度
+        playbackRates: [0.5, 1.0, 1.5, 2.0],
+        // 语言
+        language: 'zh-CN',
+        // 当true时，播放器将按比例缩放以适应其容器
+        fluid: true,
+        // 无法播放时提示信息
+        notSupportedMessage: '该视频无法正常播放',
+        // 纵横比或屏幕高宽比
+        aspectRatio: '16:9',
+        controlBar: {
+          timeDivider: true,
+          durationDisplay: true,
+          remainingTimeDisplay: true,
+          // 全屏按钮
+          fullscreenToggle: true
+        },
+        // 播放器宽度，测试无效
+        // width: 100,
+        // 视频封面图
+        poster: this.config.customize.posterUrl,
+        sources: [
+          {
+            // 流配置，数组形式，会根据兼容顺序自动切换
+            type: this.config.customize.videoType,
+            src: this.config.customize.videoUrl
+          }
+        ]
+      },
+      dataForm: {
+        script: ''
+      }
+    }
+  },
+
+  watch: {},
+  mounted () {},
+  methods: {
+    // 由于静态组件没有混入公共函数，所以需要定义一个changeStyle方法，以免报错
+    changeStyle (config) {
+      this.videoOptions.sources.type = config.customize.videoType
+      this.videoOptions.sources.type = config.customize.videoUrl
+      this.videoOptions.poster = config.customize.posterUrl
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+
+  .videoPlayer {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+::v-deep .video-js .vjs-big-play-button {
+  z-index: 100;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 4em;
+}
+</style>