视频默认图

src/views/coursewarePlay/index.tsx

@@ -23,7 +23,6 @@ import {
 } from 'vue'
 import iconBack from './image/back.svg'
 import styles from './index.module.less'
-import Plyr from 'plyr'
 import 'plyr/dist/plyr.css'
 import request from '@/helpers/request'
 import { state } from '@/state'
@@ -39,6 +38,7 @@ import iconplay from './image/icon-play.svg'
 import iconpause from './image/icon-pause.svg'
 import iconUp from './image/icon-up.svg'
 import iconDown from './image/icon-down.svg'
+import iconVideobg from './image/icon-videobg.png'
 import Points from './component/points'
 import { browser, getSecondRPM } from '@/helpers/utils'
 import { useRect } from '@vant/use'
@@ -312,7 +312,7 @@ export default defineComponent({
     const handleEnded = (m: any) => {
       // console.log(m)
       // 自动播放下一个知识点
-      if (m.autoPlay){
+      if (m.autoPlay) {
         if (popupData.activeIndex != data.itemList.length - 1) {
           popupData.activeIndex++
           swipeRef.value?.next()
@@ -320,11 +320,29 @@ export default defineComponent({
           nextTick(() => {
             nextItem.videoEle?.play()
           })
-          console.log("🚀 ~ nextItem", nextItem)
+          console.log('🚀 ~ nextItem', nextItem)
         }
       }
     }
 
+    //加载第一帧
+    const handleFirstFrame = (video: HTMLVideoElement) => {
+      // console.log("🚀 ~ 加载第一帧", video.videoWidth, video.videoHeight)
+      const captureImage = function () {
+        var canvas = document.createElement('canvas')
+        canvas.width = video.videoWidth
+        canvas.height = video.videoHeight
+        canvas?.getContext('2d')?.drawImage(video, 0, 0, canvas.width, canvas.height)
+        canvas.toBlob((blob) => {
+          // console.log("🚀 ~ blob", blob)
+          const imgUrl = URL.createObjectURL(blob as any)
+          // console.log("🚀 ~ imgUrl", imgUrl)
+          video.setAttribute('poster', imgUrl)
+        })
+      }
+      captureImage()
+    }
+
     return () => (
       <div class={styles.coursewarePlay}>
         <Swipe
@@ -362,9 +380,14 @@ export default defineComponent({
                           playsinline="false"
                           preload="auto"
                           class="player"
+                          crossorigin="anonymous"
+                          poster={iconVideobg}
                           data-vid={m.id}
                           src={m.content}
                           loop={m.loop}
+                          onLoadeddata={(e: Event) =>
+                            handleFirstFrame(e.target as unknown as HTMLVideoElement)
+                          }
                           onLoadedmetadata={(e: Event) => {
                             const videoEle = e.target as unknown as HTMLVideoElement
                             m.currentTime = videoEle.currentTime