添加

src/views/coursewarePlay/component/video-play.tsx

@@ -9,6 +9,7 @@ import iconLoopActive from '../image/icon-loop-active.svg'
 import iconplay from '../image/icon-play.svg'
 import iconpause from '../image/icon-pause.svg'
 
+import { iconSpeed } from '../image/icons.json'
 import TCPlayer from 'tcplayer.js'
 import 'tcplayer.js/dist/tcplayer.min.css'
 import { Slider } from 'vant'
@@ -74,17 +75,24 @@ export default defineComponent({
       loop: false,
       playState: 'pause' as 'play' | 'pause',
       vudio: null as any,
-      showBar: true
+      showBar: true,
+      speedControl: false,
+      speedStyle: {
+        left: '1px'
+      },
+      defaultSpeed: 1 // 默认速度
     })
+    const speedBtnId = 'speed' + Date.now() + Math.floor(Math.random() * 100)
 
-    const forms = reactive({
-      subjectIds: [],
-      orgainIds: []
-    })
+    // const forms = reactive({
+    //   subjectIds: [],
+    //   orgainIds: []
+    // })
     const videoRef = ref()
     const videoItem = ref()
     const videoID = 'video' + Date.now() + Math.floor(Math.random() * 100)
     const toggleHideControl = (isShow: boolean) => {
+      data.speedControl = false
       data.showBar = isShow
     }
     // const togglePlay = (e: Event) => {
@@ -95,6 +103,7 @@ export default defineComponent({
     // 切换音频播放
     const onToggleAudio = (state: 'play' | 'pause') => {
       // console.log(state, 'state')
+      data.speedControl = false
       clearTimeout(playTimer)
       if (state === 'play') {
         playTimer = setTimeout(() => {
@@ -109,6 +118,7 @@ export default defineComponent({
       emit('togglePlay', data.playState)
     }
     const toggleLoop = () => {
+      data.speedControl = false
       if (!videoItem.value) return
       if (data.loop) {
         videoItem.value.loop(false)
@@ -143,8 +153,10 @@ export default defineComponent({
         videoItem.value.poster(props.item.coverImg) // 封面
         videoItem.value.src(props.item.content) // url 播放地址
         // 初步加载时
+        videoItem.value.playbackRate(data.defaultSpeed)
         videoItem.value.on('loadedmetadata', (e: any) => {
           console.log(' Loading metadata')
+          videoItem.value.playbackRate(data.defaultSpeed)
 
           // 获取时长
           data.duration = videoItem.value.duration()
@@ -246,7 +258,7 @@ export default defineComponent({
       clearTimeout(videoErrorTimer)
       nextTick(() => {
         videoErrorTimer = setTimeout(() => {
-          videoItem.value.src(props.item?.content)
+          videoItem.value.src = props.item?.content
           emit('play')
           videoItem.value.load()
           // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -263,6 +275,11 @@ export default defineComponent({
         autoplay: true
       }) // player-container-id 为播放器容器 ID，必须与 html 中一致
       __initVideo()
+
+      document.getElementById(speedBtnId)?.addEventListener('click', (e) => {
+        e.stopPropagation()
+        data.speedControl = !data.speedControl
+      })
     })
 
     watch(
@@ -322,6 +339,7 @@ export default defineComponent({
           class={[styles.controls, data.showBar ? '' : styles.hide]}
           onClick={(e: Event) => {
             e.stopPropagation()
+            data.speedControl = false
           }}
           // onTouchmove={(e: TouchEvent) => {
           //   emit('close')
@@ -356,10 +374,75 @@ export default defineComponent({
               <div class={styles.actionBtn} onClick={toggleLoop}>
                 <img src={data.loop ? iconLoopActive : iconLoop} />
               </div>
+              <div class={styles.actionBtn} id={speedBtnId}>
+                <img src={iconSpeed} />
+              </div>
             </div>
             <div class={styles.name}>{item.value.name}</div>
           </div>
         </div>
+
+        <div
+          style={{
+            display: data.speedControl ? 'block' : 'none'
+          }}
+        >
+          <div
+            class={styles.sliderPopup}
+            onClick={(e: Event) => {
+              e.stopPropagation()
+            }}
+          >
+            <i
+              class={styles.iconAdd}
+              onClick={() => {
+                if (data.defaultSpeed >= 1.5) {
+                  return
+                }
+
+                if (videoItem.value) {
+                  data.defaultSpeed = (data.defaultSpeed * 10 + 1) / 10
+                  videoItem.value.playbackRate(data.defaultSpeed)
+                }
+              }}
+            ></i>
+            <Slider
+              min={1.0}
+              max={1.5}
+              step={0.1}
+              v-model={data.defaultSpeed}
+              vertical
+              barHeight={5}
+              reverse
+              onChange={() => {
+                if (videoItem.value) {
+                  videoItem.value.playbackRate(data.defaultSpeed)
+                }
+              }}
+            >
+              {{
+                button: () => (
+                  <div class={styles.sliderPoint}>
+                    {data.defaultSpeed}
+                    <span>x</span>
+                  </div>
+                )
+              }}
+            </Slider>
+            <i
+              class={[styles.iconCut]}
+              onClick={() => {
+                if (data.defaultSpeed <= 1) {
+                  return
+                }
+                if (videoItem.value) {
+                  data.defaultSpeed = (data.defaultSpeed * 10 - 1) / 10
+                  videoItem.value.playbackRate(data.defaultSpeed)
+                }
+              }}
+            ></i>
+          </div>
+        </div>
       </div>
     )
   }