修改包版本

package.json

@@ -20,12 +20,15 @@
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3",
-    "vue-template-compiler": "^2.6.14"
+    "@vue/cli-plugin-babel": "^4.0.4",
+    "@vue/cli-plugin-eslint": "^4.0.4",
+    "@vue/cli-plugin-router": "^4.0.4",
+    "@vue/cli-plugin-unit-jest": "^4.0.4",
+    "@vue/cli-plugin-vuex": "^4.0.4",
+    "@vue/cli-service": "^4.0.4",
+    "eslint": "^6.8.0",
+    "eslint-plugin-vue": "^5.2.3",
+    "vue-template-compiler": "2.6.10"
   },
   "eslintConfig": {
     "root": true,

src/components/VideoPlayer.vue

@@ -28,6 +28,10 @@
             <input type="radio" v-model="videoFormat" value="hls">
             <span>HLS (H.265)</span>
           </label>
+          <label class="format-label">
+            <input type="radio" v-model="videoFormat" value="m3u8">
+            <span>M3U8</span>
+          </label>
           <label class="format-label">
             <input type="radio" v-model="videoFormat" value="mp4">
             <span>MP4</span>
@@ -138,7 +142,7 @@ export default {
         // 自动选择解码方式
         if (this.videoFormat === 'flv') {
           this.loadFlvVideo(videoElement);
-        } else if (this.videoFormat === 'hls') {
+        } else if (this.videoFormat === 'hls' || this.videoFormat === 'm3u8') {
           this.loadHlsVideo(videoElement);
         } else if (this.videoFormat === 'mp4') {
           this.loadMp4Video(videoElement);
@@ -198,12 +202,15 @@ export default {
           alert('您的浏览器可能不支持直接播放此格式，请尝试启用解码器');
         });
       }
-      else if (this.videoFormat === 'hls' && videoElement.canPlayType('application/vnd.apple.mpegurl')) {
-        // 某些浏览器(Safari)原生支持HLS
+      else if ((this.videoFormat === 'hls' || this.videoFormat === 'm3u8') && 
+               videoElement.canPlayType('application/vnd.apple.mpegurl')) {
+        // 某些浏览器(Safari)原生支持HLS/M3U8
         videoElement.src = this.videoUrl;
         videoElement.addEventListener('loadedmetadata', () => {
           videoElement.play().catch(e => {
-            console.error('原生HLS播放失败:', e);
+            console.error('原生HLS/M3U8播放失败:', e);
+            this.playStatus = 'error';
+            this.errorMessage = 'HLS/M3U8播放失败';
           });
         });
       } else {
@@ -282,8 +289,8 @@ export default {
           alert('您的浏览器不支持FLV视频播放');
         }
       }
-      else if (this.videoFormat === 'hls') {
-        // HLS 软件解码
+      else if (this.videoFormat === 'hls' || this.videoFormat === 'm3u8') {
+        // HLS/M3U8 软件解码
         if (Hls.isSupported()) {
           this.hlsPlayer = new Hls({
             enableWorker: true,
@@ -383,6 +390,7 @@ export default {
         case 'flv':
           return 'video/x-flv';
         case 'hls':
+        case 'm3u8':
           return 'application/x-mpegURL';
         case 'mp4':
           return 'video/mp4';