添加视频

src/router/routes-student.ts

@@ -22,6 +22,14 @@ const noLoginRouter = [
     meta: {
       title: '下载管乐团学员端'
     }
+  },
+  {
+    path: '/pre-register-active',
+    name: 'pre-register-active',
+    component: () => import('@/student/pre-register-active/index'),
+    meta: {
+      title: '乐团组建家长会'
+    }
   }
 ]
 

src/student/pre-register-active/index.module.less

@@ -0,0 +1,53 @@
+.video-container {
+  position: relative;
+  width: 100%;
+  --plyr-color-main: #FF8057;
+
+  video {
+    width: 100%;
+    // object-fit: cover;
+  }
+
+  :global {
+    .video-back {
+      position: absolute;
+      left: 20px;
+      top: 20px;
+      color: #fff;
+      z-index: 99;
+      font-size: 24px;
+      width: 30px;
+      height: 30px;
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      padding: 4px 5px 4px 3px;
+    }
+
+    .plyr__poster {
+      background-size: cover;
+    }
+
+    .plyr__control--overlaid {
+      border: 1px solid #fff;
+      background-color: rgba(0, 0, 0, 0.2) !important;
+    }
+
+    .plyr--video .plyr__control:hover {
+      background-color: transparent !important;
+    }
+  }
+
+  .video {
+    position: relative;
+  }
+}
+
+.loadingVideo {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.9);
+  z-index: 10;
+}

src/student/pre-register-active/index.tsx

@@ -0,0 +1,111 @@
+import { defineComponent, onMounted, reactive, ref } from 'vue'
+import styles from './index.module.less'
+import poster from './images/video_bg.png'
+import { Loading } from 'vant'
+import { browser } from '@/helpers/utils'
+import Plyr from 'plyr'
+import 'plyr/dist/plyr.css'
+import { useInterval, useIntervalFn } from '@vueuse/core'
+
+export default defineComponent({
+  name: 'pre-register',
+  setup() {
+    // 进入页面停留计时  { counter, resume, pause }
+    // const pageInterval = useInterval(1000, { controls: true })
+
+    // 间隔多少时间同步数据
+    // const { pause, resume, isActive } = useIntervalFn(() => {
+    // }, 10000)
+    const forms = reactive({
+      loading: true,
+      player: null as any
+    })
+
+    const _init = () => {
+      const controls = [
+        'play-large',
+        'play',
+        'progress',
+        'captions',
+        'current-time',
+        'duration',
+        'settings',
+        'fullscreen'
+      ]
+      const params: any = {
+        controls: controls,
+        settings: ['speed'],
+        speed: { selected: 1, options: [0.5, 1, 1.5, 2] },
+        i18n: {
+          speed: '速度',
+          normal: '默认'
+        },
+        invertTime: false
+      }
+
+      if (browser().iPhone) {
+        params.fullscreen = {
+          enabled: true,
+          fallback: 'force',
+          iosNative: true
+        }
+      }
+
+      forms.player = new Plyr('#register-video', params)
+
+      forms.player.on('loadedmetadata', () => {
+        forms.loading = false
+      })
+
+      //
+      forms.player.on('seeking', (val: any) => {
+        console.log(val, 'val')
+      })
+
+      // 拖动结束时
+      forms.player.on('seeked', (val: any) => {
+        console.log(val, 'val')
+      })
+
+      // 如何视频在缓存不会触发
+      forms.player.on('timeupdate', (val: any) => {
+        console.log(val, 'val')
+      })
+    }
+
+    onMounted(() => {
+      _init()
+    })
+    return () => (
+      <div
+        style={{
+          paddingTop: '20vh'
+        }}
+      >
+        <div class={styles['video-container']}>
+          <video
+            id="register-video"
+            class={styles['video']}
+            src={'https://daya.ks3-cn-beijing.ksyun.com/202105/SWmqmvW.mp4'}
+            playsinline={true}
+            poster={poster}
+            preload="auto"
+          ></video>
+          {/* 加载视频使用 */}
+          {forms.loading && (
+            <div class={styles.loadingVideo}>
+              <Loading
+                size={36}
+                color="#FF8057"
+                vertical
+                style={{ height: '100%', justifyContent: 'center' }}
+              >
+                加载中...
+              </Loading>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+})