h5player接入海康ws://流

<template>
  <div class="player-container">
    <div v-if="videojsType[cp_videoType] === ''" class="my-ws-player" @mouseover="enter(true)" @mouseout="enter(false)">
      <div id="videoDom" ref="videoDom"></div>
      <div class="control" :class="isEnter ? 'enter' : ''">
        <div v-show="playMode === 1">
          <button @click="realPlay">播放</button>
          <button @click="stopPlay">停止播放</button>
        </div>
        <div class="replay" v-show="playMode === 2">
          <!-- <button @click="rePlay">回放</button> -->
          <button @click="pauseRePlay">暂停回放</button>
          <button @click="resumeRePlay">恢复回放</button>
          <button @click="stopPlay">停止回放</button>
        </div>
        <button class="full" @click="wholeFullScreen">全屏</button>
      </div>
    </div>
    <my-video-player v-if="videojsType[cp_videoType] !== ''" :src="playURL"
      :play-type="videojsType[cp_videoType]"></my-video-player>
  </div>
</template>

<script>
/*
* 在不继续播放时，需将props.playURL设置为'';
* */
import { defineComponent, onMounted, reactive, toRefs, ref, onUnmounted, onDeactivated, watch, computed } from "vue";
import dayjs from "dayjs";
import MyVideoPlayer from "@/components/common/MyVideoPlayer.vue";

export default defineComponent({
  name: 'my-ws-player',
  components: { MyVideoPlayer },
  props: {
    playURL: {
      type: String,
      default: 'ws://111.11.210.91:559/openUrl/JdWJaiA'
    },
    beginTime: {
      type: String,
      default: '2023-10-25 08:00:00'
    },
    endTime: {
      type: String,
      default: '2023-10-25 09:00:00'
    },
    playMode: {
      type: Number,
      default: 2 //1实时播放 2回放
    }
  },
  emits: [],

  setup(props, { emit }) {
    let videoDom = ref();
    let player = null;
    let state = reactive({
      cp_videoType: computed(() => {
        if (props.playURL.indexOf('.m3u8') > -1) {
          return 'm3u8'
        }
        if (props.playURL.indexOf('.mp4') > -1) {
          return 'mp4'
        }
        if (props.playURL.indexOf('ws://') > -1) {
          return 'ws'
        }
        // return 'ws'
      }),
      videojsType: {
        'm3u8': 'application/x-mpegURL',
        'mp4': 'video/mp4',
        'ws': '',
      },
      createPlayer() {
        let startTime = dayjs(props.beginTime).format('YYYY-MM-DDTHH:mm:ss') + 'Z';
        let endTime = dayjs(props.endTime).format('YYYY-MM-DDTHH:mm:ss') + 'Z';
        console.log(startTime);//2023-12-8T12:10:13Z
        console.log(endTime);
        if (state.videojsType[state.cp_videoType]) return;
        player = new JSPlugin({
          szId: 'videoDom',
        });

        state.realOrRePlay();

      },
      init() {
        if (!player) return;
        player.JS_Resize();
      },
      async wholeFullScreen() {
        player.JS_FullScreenDisplay(true);
      },
      //实时播放
      async realPlay() {

        if (!player) return;
        let playURL = props.playURL;
        player.JS_Play(playURL, { playURL, mode: 0 }, 0)
      },
      async stopPlay() {
        if (!player) return;
        player.JS_Stop();
      },
      //回放
      async rePlay() {
        if (!player) return;
        let playURL = props.playURL;
        let startTime = dayjs(props.beginTime).format('YYYY-MM-DDTHH:mm:ss') + 'Z';
        let endTime = dayjs(props.endTime).format('YYYY-MM-DDTHH:mm:ss') + 'Z';
        console.log(startTime);
        console.log(endTime);
        player.JS_Play(playURL, { playURL, mode: 0 }, 0, startTime, endTime);
      },
      async pauseRePlay() {
        player.JS_Pause();
      },
      async resumeRePlay() {
        this.player.JS_Resume();
      },
      destroy() {
        state.stopPlay();
        player = null;
        window.removeEventListener('resize', state.init)
      },
      isEnter: false,
      enter(type) {
        state.isEnter = type;
      },
      realOrRePlay() {
        if (props.playMode === 1) {
          state.realPlay();
        } else {
          state.rePlay();
        }
      }
    });
    onMounted(() => {
      // 设置播放容器的宽高并监听窗口大小变化
      window.addEventListener('resize', state.init)
      state.createPlayer();

    });
    onUnmounted(() => {
      state.destroy();
    });
    onDeactivated(() => {
      state.destroy();
    });
    watch(() => props.playURL, (newVal, oldVal) => {
      if (!props.playURL) {
        if (!player) return;
        state.stopPlay();
      }
      state.realOrRePlay();
    });
    return {
      ...toRefs(state),
      videoDom,
    };
  }
});
</script>

<style lang="less" scoped>
.player-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;

  .my-ws-player {
    height: 100%;
    width: 100%;

    // canvas {
    //   aspect-ratio: 16 / 9 !important;
    // }

    :deep(.sub-wnd) {
      border: none !important;
    }

    #videoDom {
      height: 100%;
      width: 100%;
    }

    .control {
      display: flex;
      padding: 0 10px;
      align-items: center;
      position: absolute;
      bottom: -50px;
      left: 0;
      width: 100%;
      height: 50px;
      background: rgba(0, 0, 0, 0.5);
      transition: all 0.5s;
      gap: 0 15px;
      color: black;

      .replay {
        display: flex;
        gap: 0 15px;
      }

      .full {
        margin-left: auto;
      }
    }

    .enter {
      bottom: 0 !important;
      transition: all 0.5s;
    }

  }
}
</style>

二、老系统laydate设置时间范围只可选择3天内

this.replayTime = new Date(new Date().getTime()-2*24*60*60*1000).format('yyyy-MM-dd hh:mm:ss') + ' ~ ' + new Date().format('yyyy-MM-dd hh:mm:ss');
    var flg = 2;
    var ins22 = laydate.render({ //选择时间
      elem: '#lay-time',
      range: '~',
      type: 'datetime',
      trigger:'click',
      value: this.replayTime,
      change: function(value, date, endDate){
        var startDate= new Date(date.year+"/"+date.month+"/"+date.date+" "+date.hours+":"+date.minutes+":"+date.seconds);
        var endDate= new Date(endDate.year+"/"+endDate.month+"/"+endDate.date+" "+endDate.hours+":"+endDate.minutes+":"+endDate.seconds);
        var dayDate=(endDate.getTime()-startDate.getTime())/(1000*60*60*24);
        if(dayDate>3){
          flg = 0;
          ins22.hint('日期选择不能超过3天');
          setTimeout(function (){
            $(".laydate-btns-confirm").addClass("laydate-disabled");
          },0)
        }else {
          if (flg==0){$(".laydate-btns-confirm").removeClass("laydate-disabled");}
          flg = 2;
        }
        ithis.replayTime = value;
      }
    });