zc

public/index.html

@@ -703,4 +703,6 @@
       </div>
 	</div>
   </body>
+  <script src="./xgPlayer/xgplayer.js" charset="utf-8"></script>
+  <script src="./xgPlayer/xgplayer-hls.js" charset="utf-8"></script>
 </html>

src/components/xgPlayerVideo/xgPlayerVideo.vue

@@ -0,0 +1,141 @@
+<!--
+@name: xgPlayerVideo
+@description: 通用视频组件
+@author: zc
+@time: 2024/7/1
+@引入:
+
+   <xgPlayerVideo v-for="(item,index) in videoList" :key="index" :videoProps="item" :style="'display: inline-block;width:'+item.width+'px;height:'+item.height+'px;'"></xgPlayerVideo>
+
+    或
+
+  <xgPlayerVideo :videoProps="videoProps" :style="'display: inline-block;width:'+videoProps.width+'px;height:'+videoProps.height+'px;'"></xgPlayerVideo>
+
+  import xgPlayerVideo from '@/components/xgPlayerVideo/xgPlayerVideo.vue'
+
+  components: {
+    xgPlayerVideo,
+  },
+
+  videoProps:{
+    id:50,        //(ID:非必传-默认随机生成)
+    width:600,    //(宽度:非必传-默认600)
+    height:338,   //(高度:非必传-默认338)
+    url:""        //(视频地址:必传)
+  }
+
+-->
+
+<template>
+  <div class="xgPlayerVideo">
+    <div :id="videoData.id" :ref="videoData.id"></div>
+    <!--<p class="el-icon-full-screen full-screen-button" @click="fullScreen"></p>-->
+  </div>
+</template>
+<script>
+  export default {
+    name: 'xgPlayerVideo',
+    props: {
+      videoProps:{},
+    },
+    data() {
+      return {
+        boxIdList:[],
+        videoCover: localStorage.getItem('fileBrowseEnvironment') + localStorage.getItem('videoCover'),
+        videoData:{},
+        player: null
+      }
+    },
+    created() {
+      this.$set(this,'videoData',{
+        id:this.videoProps.id?this.videoProps.id:this.generateRandomString(),
+        width:this.videoProps.width?this.videoProps.width:600,
+        height:this.videoProps.height?this.videoProps.height:338,
+        url:this.videoProps.url,
+      });
+    },
+    mounted() {
+      this.$nextTick(()=>{
+        this.initPlayer()
+      })
+    },
+    methods: {
+      initPlayer() {
+        this.player = new HlsPlayer({
+          id: this.videoData.id,
+          url: this.videoData.url,
+          isLive: true,//直播流
+          autoplayMuted: true,// 是否自动静音自动播放（默认false）
+          autoplay: true,//自动播放
+          loop: true,//自动循环
+          // controls: false,//动作条
+          ignores:  ['time','play', 'progress','fullscreen', 'volume'],
+          keyShortcut: 'off',//键盘操作禁用
+          cssFullscreen: true,//网页样式全屏--同时会增加一个不一样的全屏按钮
+          closeVideoClick: true,//禁用点击播放/暂停
+          closeVideoDblclick: true,//禁用双击全屏
+          enableContextmenu: true,//禁止播放器范围内右键菜单
+          disableProgress: true,//禁止进度条拖动交互
+          closeVideoPreventDefault: true,//关闭点击播放器video元素的阻止默认动作行为
+          closeVideoStopPropagation: true,//关闭点击播放器video元素的阻止冒泡行为
+          width: this.videoData.width,
+          height: this.videoData.height,
+          poster: localStorage.getItem('fileBrowseEnvironment') + localStorage.getItem('videoCover'),
+          hls: {
+            retryCount: 999, // 重试 3 次，默认值
+            retryDelay: 1000, // 每次重试间隔 1 秒，默认值
+            loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
+          }
+        })
+        this.player.once('ready',()=>{
+          setTimeout(function () {
+            console.log('ready')
+          }, 1000);
+        })
+      },
+      //窗口全屏
+      fullScreen(){
+        this.$refs[this.videoData.id].webkitRequestFullScreen();
+      },
+      //生成随机ID
+      generateRandomString() {
+        let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+        let randomString = "";
+        for (let i = 0; i < 24; i++) {
+          let randomIndex = Math.floor(Math.random() * chars.length);
+          randomString += chars.charAt(randomIndex);
+        }
+        return randomString;
+      },
+      videoOff(){
+        this.player.destroy();
+      },
+    },
+    beforeDestroy() {
+      let self = this;
+      self.videoOff();
+    },
+  }
+</script>
+<style scoped lang="scss">
+  .xgPlayerVideo {
+    *{
+      margin:0;
+      padding:0;
+    }
+    position: relative;
+    .full-screen-button{
+      color:#fff;
+      position:absolute;
+      font-size:20px;
+      height:30px;
+      width:30px;
+      line-height:30px;
+      text-align: center;
+      top:0;
+      right:0;
+      z-index: 1;
+      cursor: pointer;
+    }
+  }
+</style>

src/views/demo.vue

@@ -2,44 +2,61 @@
   <div class="app-container demo">
     <div class="page-top-title-box">
       <p class="page-top-title-name-p">测试页面</p>
-      <p class="page-top-title-add-p">测试</p>
+      <p class="page-top-title-add-p" @click="demo2">测试</p>
     </div>
-    <div class="scrollbar-box">
-      <mpegts-video :style="'display: inline-block;width:'+item.width+'px;height:'+item.height+'px;'" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>
+    <div class="scrollbar-box" v-if="pageType">
+      <xgPlayerVideo v-for="(item,index) in videoList" :key="index" :videoProps="item"
+                     :style="'display: inline-block;width:'+item.width+'px;height:'+item.height+'px;'"></xgPlayerVideo>
+      <!--<mpegts-video :style="'display: inline-block;width:'+item.width+'px;height:'+item.height+'px;'" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>-->
     </div>
   </div>
 </template>
 <script>
   import { jobAdminLogin } from "@/api/commonality/homologouspermission";
   import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
+  import xgPlayerVideo from '@/components/xgPlayerVideo/xgPlayerVideo.vue'
   export default {
     name: 'demo',
     components: {
       mpegtsVideo,
+      xgPlayerVideo
     },
     data () {
       return {
-        videoList:[],
+        pageType:true,
+        videoList:[
+          {
+            width:600,    //(宽度:非必传-默认600)
+            height:338,   //(高度:非必传-默认338)
+            url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8',
+          },
+          {
+            width:600,    //(宽度:非必传-默认600)
+            height:338,   //(高度:非必传-默认338)
+            url: 'http://192.168.1.88:8230/rtp/440102004920000000010064_34020000001320000064/hls.m3u8',
+          }
+        ],
       }
     },
     created(){
 
     },
     mounted(){
-      this.demo();
+      // this.demo();
     },
     methods:{
+      demo2(){
+        this.$set(this,'pageType',!this.pageType);
+      },
       demo(){
         let list = [];
-        for(let i=1;i<17;i++){
+        for(let i=1;i<2;i++){
           list.push(
             {
-              id:i,        //(ID:非必传-默认随机生成)
-              width:200,    //(宽度:非必传-默认600)
-              height:100,   //(高度:非必传-默认338)
-              type:'flv',   //(视频类型:非必传-默认'flv')
-              isLive:true,  //(是否直播流:非必传-默认true)
-              url:"ws://ali-acfun-adaptive.pull.etoote.com/livecloud/kszt_xD3_7BOrPJk_sd1000.flv?auth_key=1721872343-0-0-ec4364c6355be440ce161df90a41b731&oidc=alihb&tsc=origin&kabr_spts=8078065"        //(视频地址:必传)
+              width:600,    //(宽度:非必传-默认600)
+              height:338,   //(高度:非必传-默认338)
+              url: 'http://192.168.1.88:8230/rtp/440102004920000000010064_34020000001320000064/hls.m3u8',
+              // url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8',
             }
           )
         }