优化

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "my-vue3-project",
+  "name": "hls",
   "version": "0.1.0",
   "private": true,
   "scripts": {

src/App.vue

@@ -7,7 +7,93 @@
     <router-view/>
   </div>
 </template>
+<script>
+    export default {
+        name: 'App',
+        async mounted() {
+            // let userInfo = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : null;
+            // let userId = this.getQueryString("leavePhoneCustomerId") || this.getQueryString("userId");
+            // let xcxHouseId = this.getQueryString("xcxHouseId") || this.getQueryString("houseId");
+            // let openid = this.getQueryString("openid"); //土地id
+            // let houseName = this.getQueryString("houseName"); //项目名称
+            // let session = this.getQueryString("session"); //土地id
+            // let phone = this.getQueryString("phone") || this.getQueryString("hasphone"); //ueId-说明选择了具体的户型
+            // let brandId = this.getQueryString("brandId") || this.getQueryString("special_ID") || (window.env == 'prod' ? 109 : 102);
+            // let nickname = this.getQueryString("nickname");
+            // let head = this.getQueryString("head");
+            // let tabIndex = this.getQueryString("tabIndex") || "";
+            // let assortIndex = this.getQueryString("assortIndex") || "";
+            // "rtmp://ns8.indexforce.com/home/mystream"
+            // let rtmpUrl = this.getQueryString("rtmpUrl") ? decodeURIComponent(this.getQueryString("rtmpUrl")) : "https://pull-flv-l26.douyincdn.com/stage/stream-7494487357391899430_or4.flv?arch_hrchy=h1&exp_hrchy=h1&expire=680b05b3&major_anchor_level=common&sign=6b4583445b8cec1487578a416fd99ff1&t_id=037-202504181146583540E8805FE9B5B6156E-osS8i5&unique_id=stream-7494487357391899430_139_flv_or4";
+            let rtmpUrl = this.getQueryString("rtmpUrl") ? decodeURIComponent(this.getQueryString("rtmpUrl")) : "https://pull-flv-l26.douyincdn.com/stage/stream-7494487357391899430_or4.flv?arch_hrchy=h1&exp_hrchy=h1&expire=680b05b3&major_anchor_level=common&sign=6b4583445b8cec1487578a416fd99ff1&t_id=037-202504181146583540E8805FE9B5B6156E-osS8i5&unique_id=stream-7494487357391899430_139_flv_or4";
+            if (rtmpUrl) { //如果存在集团id
+                this.$store.state.rtmpUrl = rtmpUrl;
+            }
+            // if (openid) { //openid
+            //     this.$store.state.openid = openid;
+            // }
+            // if (houseName) { //如果存在项目名称
+            //     this.$store.state.houseName = houseName;
+            // }
+            // if (session) { //如果存在session
+            //     this.$store.state.session = session;
+            // }
+            // if (xcxHouseId) { //如果存在houseid
+            //     this.$store.state.houseId = xcxHouseId
+            // }
+            // // if (query) { //如果存在入参
+            // //   setStorage('queryObj', query);
+            // // }
+            
+            // if (phone) { //如果存在用户id
+            //     this.$store.state.phone = phone;
+            // }
+            // if (nickname) { //如果存在用户名称
+            //     this.$store.state.nickname = nickname;
+            // }
+            // if (head) { //如果存在用户头像
+            //     this.$store.state.head = head;
+            // }
+            // if (tabIndex) { //如果存在指定的tab
+            //     this.$store.state.tabIndex = tabIndex;
+            // }
+            // if (assortIndex) { //如果存在指定的assortIndex
+            //     this.$store.state.assortIndex = assortIndex;
+            // }
+            // if (aiAgentDesc) { //如果存在指定的aiAgentDesc
+            //     this.$store.state.aiAgentDesc = aiAgentDesc;
+            // }
 
+            console.warn("***init****", this.$store.state.rtmpUrl,rtmpUrl, window.env)
+            window.addEventListener('error', (error) => {
+                console.warn("***error***", error)
+                // 区分是否是js错误
+                if (error.message) {
+                    console.warn("error" + error.message)
+                }
+            }, true)
+        },
+        methods: {
+            /**
+             * 解析页面路由参数
+             * @param name
+             * @returns {null}
+             */
+            getQueryString(name) {
+                let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
+                let arr = decodeURIComponent(window.location.href).split('?');
+                let result = null;
+                arr.forEach((item, index) => {
+                    let res = item.match(reg);
+                    if (res != null) {
+                        result = unescape(res[2]);
+                    }
+                })
+                return result || "";
+            }
+        }
+    }
+</script>
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

src/components/VideoPlayerComponent.vue

@@ -1,10 +1,9 @@
 <template>
     <div class="video-player">
-        <!-- <video ref="videoElement" class="video video-js vjs-default-skin" controls autoplay muted="true"
-            @error="onVideoError" data-setup='{}'></video> -->
+        <video ref="videoElement" controls autoplay class="video" muted="true" @error="onVideoError"></video>
         <!-- <videoPlayer v-show="videoType == 'rtmp'" :options="videoOptions" class="video videoPlayer" :playsinline="true" /> -->
         <!-- <video v-show="videoType != 'rtmp'" ref="videoElement" controls autoplay class="video" muted="true" @error="onVideoError"></video> -->
-        <video ref="videoElement" controls autoplay class="video video-js vjs-default-skin" muted="true" @error="onVideoError" data-setup='{}'></video>
+        <!-- <video ref="videoElement" controls autoplay crossorigin class="video video-js vjs-default-skin" muted="true" @error="onVideoError"></video> -->
     </div>
 </template>
 
@@ -20,14 +19,14 @@
     // console.warn("****videoPlayer1**",videoPlayer)
     export default {
         props: {
-            videoUrl: {
-                type: String,
-                required: true,
-            },
-            videoType: {
-                type: String,
-                default: 'hls', // 'hls' or 'flv'
-            },
+            // videoUrl: {
+            //     type: String,
+            //     required: true,
+            // },
+            // videoType: {
+            //     type: String,
+            //     default: 'hls', // 'hls' or 'flv'
+            // },
         },
         // components: {
         //     videoPlayer,
@@ -35,42 +34,35 @@
         data() {
             return {
                 videoSrc: '',
-                // 视频播放
-                videoOptions: {
-                    // playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
-                    autoplay: true, //如果true,浏览器准备好时开始回放。
-                    muted: true, // 默认情况下将会消除任何音频。
-                    loop: true, // 导致视频一结束就重新开始。
-                    volume:0,
-                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
-                    language: 'zh-CN',
-                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
-                    techOrder: ['flash'], // 兼容顺序
-                    sources: [{
-                        // 流配置，数组形式，会根据兼容顺序自动切换
-                        type: 'rtmp/mp4',
-                        // src: 'rtmp://36.150.174.132:57935/oss/eHh4eFNfMjQ0ODQ1YmU5MTNkOjg1NTc5NTI2NDAwODI0ODUyODc?deviceId=xxxxS_244845be913d&expireTime=1744858930&playType=0', //拉流url
-                        src:'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp'
-                    }],
-                    poster: '', //你的封面地址
-                    // width: document.documentElement.clientWidth,
-                    notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
-                    controls:false,
-                    // flash: {
-                    //     swf: '/node_modules/videojs-swf/dist/video-js.swf'
-                    // }
-                    // controlBar: {
-                    //     timeDivider: true,
-                    //     durationDisplay: true,
-                    //     remainingTimeDisplay: false,
-                    //     fullscreenToggle: true, //全屏按钮
-                    // },
+                videoType:'hls',
+                
+            }
+        },
+        computed: {
+            videoUrl() {
+                return this.$store.state.rtmpUrl
+            },
+        },
+        watch:{
+            videoUrl:{
+                handler(val, oldVal){
+                    if (val) {
+                        let _url = val.split('?')[0];
+                        if(_url.startsWith('rtmp')){
+                            this.videoType = "rtmp"
+                        }else if(_url.endsWith('.m3u8')){
+                            this.videoType = "hls"
+                        }else if(_url.endsWith('.flv')){
+                            this.videoType = "flv"
+                        }
+                        this.initPlayer();
+                    }
+                    console.warn("***videoUrl***",this.videoType,val)
                 },
             }
         },
-        
         mounted() {
-            this.initPlayer();
+            
         },
         beforeDestroy() {
             this.destroyPlayer();
@@ -97,29 +89,34 @@
                 } else if (this.videoType === 'rtmp') {
                     // this.videoOptions.sources[0].src = this.videoUrl;
                     videojs(video, {
-                        // autoplay: true, //如果true,浏览器准备好时开始回放。
-                        // muted: true, // 默认情况下将会消除任何音频。
-                        // loop: true, // 导致视频一结束就重新开始。
-                        // volume:0,
+                        autoplay: true, //如果true,浏览器准备好时开始回放。
+                        muted: true, // 默认情况下将会消除任何音频。
+                        loop: false, // 导致视频一结束就重新开始。
+                        crossorigin:'*',
                         techOrder: ['flash'],
                         sources: [{
-                            // src: this.videoUrl,
-                            src:'rtmp://ns8.indexforce.com/home/mystream',
-                            type: 'rtmp'
+                            src: this.videoUrl,
+                            // src:'rtmp://39.130.243.104:1935/oss/eHh4eFNfMjQ0ODQ1YmU0NmVmOjU1OTQ4NTU1NTgwNTc4MjA2ODA?deviceId=xxxxS_244845be46ef&expireTime=1744884926&playType=0',
+                            type: 'rtmp/mp4'
                         }],
                         notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                         controls:false,
                     });
+                    videojs.hook('error', function(player, err) {
+                        console.warn("***beforeerror***",err)
+                    });
+                    console.warn("***视频地址***",this.videoUrl)
                 } else {
                     console.error('不支持的播放格式');
                 }
             },
             destroyPlayer() {
                 const video = this.$refs.videoElement;
-                if (this.videoType === 'hls' && Hls.isSupported()) {
+                console.warn("***destroyPlayer-视频地址***",this.videoType)
+                if (this.videoType === 'hls' && Hls && Hls.isSupported()) {
                     Hls.destroy();
                 }
-                if (this.videoType === 'flv' && Flv.isSupported()) {
+                if (this.videoType === 'flv' && Flv && Flv.isSupported()) {
                     Flv.destroy();
                 }
                 if (this.videoType === 'rtmp') {

src/main.js

@@ -5,7 +5,7 @@ if (process.env.NODE_ENV == 'production' || process.env.NODE_ENV == 'uat') {
     }
 }
 window.env = process.env.NODE_ENV;
-let env = window.env == 'development' ? 'test2' : env;
+let env = window.env == 'development' ? 'test2' : window.env;
 const api = require('@/utils/config.js');
 window.WEB_CONF = api(env);
 console.log(window.env, window.WEB_CONF);

src/store/index.js

@@ -6,6 +6,7 @@ Vue.use(Vuex)
 export default new Vuex.Store({
     state: {
         loading: false,
+        rtmpUrl:'',
     },
     getters: {},
     mutations: {},

src/views/HomeView.vue

@@ -2,7 +2,7 @@
     <div class="home">
         <!-- <img alt="Vue logo" src="../assets/logo.png">
         <HelloWorld msg="Welcome to Your Vue.js App"/> -->
-        <VideoPlayerComponent :videoUrl="videoUrl" :videoType="videoType" />
+        <VideoPlayerComponent />
     </div>
 </template>
 
@@ -25,10 +25,17 @@
                 // 快手直播里面的
                 // 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'
-                videoUrl: 'rtmp://36.150.174.132:57935/oss/eHh4eFNfMjQ0ODQ1YmU5MTNkOjg1NTc5NTI2NDAwODI0ODUyODc?deviceId=xxxxS_244845be913d&expireTime=1744858930&playType=0', // HLS 流地址
+                // videoUrl: 'rtmp://rtmp-yn-hcs.reservehemu.com:1935/oss/eHh4eFNfMjQ0ODQ1YmU0NmVmOjg2NTEyNDYyNDAxNjY4MDk3Mjk?deviceId=xxxxS_244845be46ef&expireTime=1744881577&playType=0', // HLS 流地址
+                // videoUrl: 'rtmp://ns8.indexforce.com/home/mystream', // HLS 流地址
+                // videoUrl: 'rtmp://live.hkstv.hk.lxdns.com/live/hks2', // HLS 流地址
                 videoType: 'rtmp', // 或 'flv'
             };
         },
+        // computed: {
+        //     videoUrl() {
+        //         return this.$store.state.rtmpUrl
+        //     },
+        // },
         mounted() {
             this.getIpAddr()
         },

vue.config.js

@@ -5,6 +5,7 @@ const {
 module.exports = defineConfig({
     transpileDependencies: true,
     lintOnSave: false, // 禁用 ESLint 检查
+    publicPath: './', // 设置为相对路径
     pluginOptions: {
         'style-resources-loader': {
             preProcessor: 'scss',