封面图

src/views/coursewarePlay/component/video-item/index.tsx

@@ -7,6 +7,7 @@ import iconLoop from '../../image/icon-loop.svg'
 import iconLoopActive from '../../image/icon-loop-active.svg'
 import iconplay from '../../image/icon-play.svg'
 import iconpause from '../../image/icon-pause.svg'
+import { iconVideoBg } from '../../image/icons.json'
 
 export default defineComponent({
   name: 'video-play',
@@ -151,22 +152,22 @@ export default defineComponent({
       clearTimeout(videoTimer)
       nextTick(() => {
         data.videoContianerRef.play().catch((err) => {
-          console.log("🚀 ~ err:", err)
+          console.log('🚀 ~ err:', err)
           videoTimer = setTimeout(() => {
             if (err?.message?.includes('play()')) {
               emit('play')
             }
-            handlePlayVideo();
+            handlePlayVideo()
           }, 1000)
         })
       })
     }
 
-    let videoErrorTimer = null as any;
-    let videoErrorCount = 0;
+    let videoErrorTimer = null as any
+    let videoErrorCount = 0
     const handleErrorVideo = () => {
       if (videoErrorCount > 5) {
-        return;
+        return
       }
       clearTimeout(videoErrorTimer)
       nextTick(() => {
@@ -175,10 +176,10 @@ export default defineComponent({
           emit('play')
           data.videoContianerRef.load()
           // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          handleErrorVideo();
+          handleErrorVideo()
         }, 1000)
       })
-      videoErrorCount++;
+      videoErrorCount++
     }
 
     return () => (
@@ -187,19 +188,20 @@ export default defineComponent({
           ref={(el) => (data.videoContianerRef = el as unknown as HTMLAudioElement)}
           class={styles.itemDiv}
           src={props.item?.content}
+          poster={iconVideoBg}
           webkit-playsinline
           playsinline
           x5-video-player-type="h5"
           onLoadedmetadata={() => {
             data.videoState = 'pause'
-            changePlayBtn('play');
+            changePlayBtn('play')
             nextTick(() => {
-              data.videoContianerRef.currentTime = 0;
+              data.videoContianerRef.currentTime = 0
               nextTick(handlePlayVideo)
             })
           }}
           onPlay={() => {
-            videoErrorCount = 0;
+            videoErrorCount = 0
             console.log('开始播放')
             data.videoState = 'play'
             changePlayBtn('pause')

src/views/coursewarePlay/image/icons.json

@@ -4,5 +4,6 @@
   "iconSongActive": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAwCAMAAACyjAPtAAAAvVBMVEUAAAD/gFf/hFv/g1n/gVj/gVf/gVf/glf/iWD/gFf/gVfnVjP/gVfoaUD/gFf/gVj/gVf/gVf/gFf/gFf/glf/hFn/glz/gFfmUjD/gFf/gln/glnqYzr/elX/gVf/gVf/gFf/gFj/gVf/gVj/hFn/g1n/gFf/gVf/gFf/gVf/glf2ckr/gVn/g1nqYDv/gln/glr/gFf/h1zlUC//gln/hlv/hFryaEPmUC/jTS3qUTD6dk/0a0X3aUTpWDUbjTeSAAAAMXRSTlMAgA0jEfrkcAj17OfGOOHbY+rAspQYFO/pylZBJgTXuIiDfHctHNLPqZ5Z65BIPTkzF22pEwAAAZBJREFUSMed1nlvgjAYBvCulFMmeABTh/e9s9J2bm77/h9rI1RqkLbE578n/dG8CSQv4JbA4eKuJrPXOhx2TEzwddjD/TW2sSQkaz1WseFK9edXq3p7n8l1dqwO42GFzo6VYahSZ5VhDmrNh2mq+TB6nVsxjE7/cs6HUWt8OnLOh1HfTU7fH0V+npSaMErWvugHmTZdz/Kf98b/2UStXX87C0cGP3K2Sp2MoANEnJ5SW2fH9aSpXr0ZAHYb6GXY9y0v8ZFe2x6ljOQliKGv1O3LOkZooNFQ1DVCG41GtCwbhMYaHQs9gCjQ6EhoH8ZtpQ7AqtSkC2NLpckYGJTT6cx24o5cMysIznrvAJCCKJHqSZS3Za7JS3EUuTI9BaDUvZRrU6ID3t5zPedlRes1mfI2Yhd6zuo1C3nrk/y9OMWTJpbc3SuK0Slazu0ESzQ2hykAqcE/OoK7PZNhqcbuzrZ3XikIwViiNbld00aacu010p7YUvqwvtiA+riG2K762PrNfX5TZifU/RWILIYQ3JA/rAoMMGitfiEAAAAASUVORK5CYII=",
   "iconSong": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAwCAMAAACyjAPtAAAAt1BMVEUAAAD////////////////////////c3NzU1NT////////////////////////////////////////////////R0dH////////////////////Y2Nj////////////////////////////////////////////////////////////////u7u7////////////////////////////////Q0NDn5+fR0dHNzc3V1dXr6+v39/f19fUmQCkyAAAANHRSTlMAgOwO+eRwO+sRC/Xh2yIHyJQYFPHr0cW0ZFYoJtfAu66Ig3x2QjAcymFZPO/CpZ6dkEgqAPa9ZgAAAWpJREFUSMfF1mtvgjAUBuCuLcyCXAQm6nTe77uvzun2/3/XAtWdhtAe45e9n/qGJ+QESAu5Jqw3u6nJ5LYOdymXtbmr4a405atxX8V936wPjerdW9Ksd/vqMNSmd/vKMNKqd/owuNaHwTUMg+nCwjCYPiithkH1z15pbRhpyffxU+X4iOp2rhWT5j514rdNSAjp2LWfP0+685CoRCOrzuZeRCCe/d4OyFIPL9XLbXiZXqxbuUOzWLAnTLv0XIKUxVbd1OtAsBWiPShtIdqIFppmYoDoFErMRIDoBErO0qZVB2QJ5cFLHasekPBMxxM3SqlFO0FA+mq5KT+XxKyHSdE+yvW7upRkJj1WbVGsO9FJc4MOiKanp7KUBj0+tbmupya91vfQlZpky016pEpIVfOKfT2TJs17JY7/Xk2HS2nU0n9x3VcqjQEN+VdNL8JUe8J4WnAC4vH7cLricbGTG8JpF/srgMx6jFyRX2m4GmEb3vXDAAAAAElFTkSuQmCC",
   "iconVideoActive": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAwCAMAAACyjAPtAAAAbFBMVEUAAAD/gVf/gFf/gFj/gVf/gFf/gFf/gFf/gFf/gVj/g2X/gFj/gVf/gVf/gVj/glj/gVj/glj/gFj/gVj/gVn/glj/gVf/gVf/hVj/gFj/gFf/gVf/g1f/gVj/gVf/gVf/g1f/glj/gFf/hVohLt2ZAAAAInRSTlMAgPiC73z8UqCQCiDRu4d0XVjkcFMyrsknGtjMUrSYaUw9WXxT6AAAASJJREFUSMfVlVtOwzAQRetHXNtp3nVK01DAs/89MsOIho8ijSWE2vt1MjqKHDm+3j136qFTv6cb6h9u9FZnwGQK0saM2vr4LZ8P+DwrY9oTCa4xRpnGEZ9aHBPC4cxyRDkb5gsaM6NH5ZXRAOmRx8j6necBMvSMb+6GL0Br8oS1RXQTzxucBsZ2w57sbGvEQROO036/PwaHqKsjcmVprAgnRJoPaHf88U5jMuc+5g5tlaVR/2zr0cpt28cUHAjt69d2XEBmV7whlZXb9HovtTlpBKHNCVpoc65FdoISuy+x05jldquz2P4YIUvt5EV7GXgRNovspd7FtEj/QVjC/CAn7c/s0vbZmm1db8223m+24taUN3Jx28tvktJbSn4DPnU+Ae8umj0vGzyFAAAAAElFTkSuQmCC",
-  "iconVideo": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAwCAMAAACyjAPtAAAAe1BMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////NgkbwAAAAKHRSTlMAgPZSfPr4oFruIArRu3TxkY6ChTPlyXFrXhoE4MyviSbWtKyYTCw97O6yIgAAAQxJREFUSMfVldtOwzAMQNPQXLve222suwFj+P+/ELvZGBIC2RJC7DwdWUd5aFRH3TfRV9n3VD5+agsXLPyEDa64xpsFgNnjGf0SALXs0EtDvuyvuthcTsYYuuQ71JekDvU5aQeUFx9j/ZrmLfpj0vVNj0A40hjQzDrNS/Qm6eGmHogQSS3puHpAWoOqc9K8pnFGupoVrMe6goTW2l7Uon9VqLDOgEv2x7Uea35d++LcGG59wtF03jHrXM3ktaRWRyep1TRs+TXRGkmtTqJ6ENVeUg9bQX3QwK2nt5H/vQfHust2jvsArPopplvk1JQ3+3/yp/1aLds+ss0m25qijSzb9qKXRPRKiV7Au+Yd2uO1AIRu5IoAAAAASUVORK5CYII="
+  "iconVideo": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAwCAMAAACyjAPtAAAAe1BMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////NgkbwAAAAKHRSTlMAgPZSfPr4oFruIArRu3TxkY6ChTPlyXFrXhoE4MyviSbWtKyYTCw97O6yIgAAAQxJREFUSMfVldtOwzAMQNPQXLve222suwFj+P+/ELvZGBIC2RJC7DwdWUd5aFRH3TfRV9n3VD5+agsXLPyEDa64xpsFgNnjGf0SALXs0EtDvuyvuthcTsYYuuQ71JekDvU5aQeUFx9j/ZrmLfpj0vVNj0A40hjQzDrNS/Qm6eGmHogQSS3puHpAWoOqc9K8pnFGupoVrMe6goTW2l7Uon9VqLDOgEv2x7Uea35d++LcGG59wtF03jHrXM3ktaRWRyep1TRs+TXRGkmtTqJ6ENVeUg9bQX3QwK2nt5H/vQfHust2jvsArPopplvk1JQ3+3/yp/1aLds+ss0m25qijSzb9qKXRPRKiV7Au+Yd2uO1AIRu5IoAAAAASUVORK5CYII=",
+  "iconVideoBg": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABkQAAAOQAQMAAABSL48WAAAAA1BMVEUAAACnej3aAAAA50lEQVR42uzBgQAAAACAoP2pF6kCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGD24EAAAAAAAMj/tRFUVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVYU9OBAAAAAAAPJ/bQRVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVdkoGAWjAAkAAM++AAHC6VozAAAAAElFTkSuQmCC"
 }