修改

h5-dm-hls

@@ -0,0 +1 @@
+Subproject commit 23c5b1934ac65650ffe14d561bc4ef6ccbda72da

package-lock.json

@@ -3638,6 +3638,12 @@
         "es-errors": "^1.3.0"
       }
     },
+    "es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
+      "dev": true
+    },
     "escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.2.0.tgz",
@@ -4273,6 +4279,16 @@
       "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
       "dev": true
     },
+    "flv.js": {
+      "version": "1.6.2",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/flv.js/-/flv.js-1.6.2.tgz",
+      "integrity": "sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==",
+      "dev": true,
+      "requires": {
+        "es6-promise": "^4.2.8",
+        "webworkify-webpack": "^2.1.5"
+      }
+    },
     "follow-redirects": {
       "version": "1.15.9",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -4513,6 +4529,12 @@
       "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
       "dev": true
     },
+    "hls.js": {
+      "version": "1.6.2",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/hls.js/-/hls.js-1.6.2.tgz",
+      "integrity": "sha512-rx+pETSCJEDThm/JCm8CuadcAC410cVjb1XVXFNDKFuylaayHk1+tFxhkjvnMDAfqsJHxZXDAJ3Uc2d5xQyWlQ==",
+      "dev": true
+    },
     "hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmmirror.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -8016,6 +8038,12 @@
       "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
+    "webworkify-webpack": {
+      "version": "2.1.5",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
+      "integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw==",
+      "dev": true
+    },
     "whatwg-fetch": {
       "version": "3.6.20",
       "resolved": "https://registry.npmmirror.com/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",

package.json

@@ -19,6 +19,8 @@
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
+    "flv.js": "^1.6.2",
+    "hls.js": "^1.6.2",
     "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {
@@ -33,7 +35,10 @@
     "parserOptions": {
       "parser": "@babel/eslint-parser"
     },
-    "rules": {}
+    "rules": {
+        "no-unused-vars": "off",
+        "no-extra-semi": "off"
+    }
   },
   "browserslist": [
     "> 1%",

src/App.vue

@@ -1,28 +1,43 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+    <div id="app">
+        <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
+        <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
+        <VideoPlayer :videoUrl="videoUrl" :videoType="videoType" />
+    </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+    // import HelloWorld from './components/HelloWorld.vue'
+    import VideoPlayer from './components/VideoPlayer.vue';
 
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
+    export default {
+        name: 'App',
+        components: {
+            VideoPlayer
+        },
+        data() {
+            return {
+                // https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8
+                // videoUrl: 'https://gcalic.v.myalicdn.com/gc/zyqcdx01_1/index.m3u8', // HLS 流地址
+                // videoType: 'hls', // 或 'flv'
+                // 快手直播里面的
+                videoUrl: 'https://ws-origin.pull.yximgs.com/gifshow/kwai_actL_ksle_20250411142108_GwU_strL_hd2000.flv?wsTime=67fa1bac&wsSecret=c09f848b129c9e352a4eab5ce2e06a80&stat=HKoB%2BwNN2oCYt7Rc2VlNANkgzdjg%2BiPBuC2zPQcpCqA6tJusJ0cQ%2BhKEfVoBjqV7&tsc=origin&oidc=watchmen&sidc=2062&no_script=1&srcStrm=lytuRPfcqgM&fd=0&ss=s20&tfc_buyer=0&kabr_spts=-5000', // HLS 流地址
+                videoType: 'flv', // 或 'flv'
+            };
+        },
+        methods:{
+            
+        },
+    }
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
+    #app {
+        font-family: Avenir, Helvetica, Arial, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-align: center;
+        color: #2c3e50;
+        margin-top: 0px;
+    }
+</style>

src/components/VideoPlayer.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="video-player">
+        <video ref="videoElement" controls autoplay class="video" muted="true" @error="onVideoError"></video>
+    </div>
+</template>
+
+<script>
+    import Hls from 'hls.js';
+    import Flv from 'flv.js';
+
+    export default {
+        props: {
+            videoUrl: {
+                type: String,
+                required: true,
+            },
+            videoType: {
+                type: String,
+                default: 'hls', // 'hls' or 'flv'
+            },
+        },
+        mounted() {
+            this.initPlayer();
+        },
+        beforeDestroy() {
+            this.destroyPlayer();
+        },
+        methods: {
+            initPlayer() {
+                const video = this.$refs.videoElement;
+
+                if (this.videoType === 'hls' && Hls.isSupported()) {
+                    const hls = new Hls();
+                    hls.loadSource(this.videoUrl);
+                    hls.attachMedia(video);
+                    hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                        video.play();
+                    });
+                } else if (this.videoType === 'flv' && Flv.isSupported()) {
+                    const flvPlayer = Flv.createPlayer({
+                        type: 'flv',
+                        url: this.videoUrl,
+                    });
+                    flvPlayer.attachMediaElement(video);
+                    flvPlayer.load();
+                    flvPlayer.play();
+                } else {
+                    console.error('不支持的播放格式');
+                }
+            },
+            destroyPlayer() {
+                const video = this.$refs.videoElement;
+                if (Hls.isSupported()) {
+                    Hls.destroy();
+                }
+                if (Flv.isSupported()) {
+                    Flv.destroy();
+                }
+            },
+            onVideoError(e) {
+                console.error('视频播放错误:', e);
+            },
+        },
+    };
+</script>
+
+<style scoped>
+    .video-player {
+        width: 100%;
+        height: 100%;
+        background: #000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+</style>