多视角监控回放页面实现

背景

在实际工作中，我们经常需要对监控视频进行回放，但是通常只有一个视角的视频，无法满足实际需求。因此，我们需要实现一个多视角监控回放页面，支持同时播放多个视角的视频。

需求

• 支持同时播放多个视角的视频
• 支持视频的暂停、播放操作
• 支持视频的倍速播放
• 支持视频的拖动播放
• 支持视频的音量调节
• 支持时间轴标记
• 支持视频的截图
• 支持视频的全屏播放

技术栈

• Vue 3
• TypeScript
• flv.js
• TailwindCSS

核心组件实现

视频播放器

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import Mpegts from 'mpegts.js'

const props = defineProps({
  url: {
    type: String,
    required: true,
  },
  vid: {
    type: String,
    default: 'vid',
  },
  startTime: {
    type: Number,
    default: 0,
  },
  currentTime: {
    type: String,
    default: '',
  },
  rate: {
    type: Number,
    default: 1,
  },
})

const emit = defineEmits<{
  (e: 'error', message: string): void
  (e: 'timeupdate', time: Number): void
  (e: 'volumechange', volume: Number): void
  (e: 'ratechange', rate: Number): void
  (e: 'ended'): void
  (e: 'pause'): void
  (e: 'play'): void
}>()

let player: Mpegts.Player | null = null
let ele: HTMLVideoElement | null = null
const currentTime = ref<Number>(0)
const seeking = ref<Boolean>(false)
const isFullscreen = ref<Boolean>(false)

const initPlayer = async () => {
  if (!Mpegts.isSupported()) {
    return
  }
  await destroy()
  ele = document.getElementById(props.vid) as HTMLVideoElement
  if (!ele || !props.url) {
    return
  }
  player = Mpegts.createPlayer({
    url: props.url,
    type: 'mp4',
    cors: true,
    isLive: false,
  })
  player.attachMediaElement(ele)
  player.load()
  player.on(Mpegts.Events.ERROR, onError)
  ele.addEventListener('canplay', () => {
    if (props.startTime && ele.currentTime !== props.startTime) {
      ele.currentTime = props.startTime
    }
    ele.playbackRate = props.rate
    play()
  })
  ele.addEventListener('playing', onPlay)
  ele.addEventListener('ended', onEnded)
  ele.addEventListener('abort', onEnded)
  ele.addEventListener('pause', onPause)
  ele.addEventListener('waiting', onPause)
  ele.addEventListener('timeupdate', onTimeupdate)
  ele.addEventListener('ratechange', onRatechange)
  ele.addEventListener('volumechange', onVolumechange)
  ele.addEventListener('seeking', onSeeking)
  ele.addEventListener('seeked', onSeeked)
}

const play = () => {
  if (player) {
    player.play()
  }
}

const pause = () => {
  if (player) {
    player.pause()
  }
}

const resume = () => {
  if (player) {
    player.play()
  }
}

const seek = (time: Number) => {
  if (player && !seeking.value) {
    ele.currentTime = time
  }
}

const muted = () => {
  if (player) {
    ele.muted = true
    ele.volume = 0
  }
}

const setVolume = (val) => {
  if (player) {
    ele.muted = false
    ele.volume = val
  }
}

const setRate = (val) => {
  if (player) {
    ele.playbackRate = val
  }
}

const snapshot = () => {
  if (!ele || !props.url) {
    return
  }
  try {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    const { videoWidth, videoHeight } = ele
    canvas.width = videoWidth || ele.clientWidth
    canvas.height = videoHeight || ele.clientHeight
    ctx.drawImage(ele, 0, 0, canvas.width, canvas.height)
    canvas.toBlob((blob) => {
      if (!blob) {
        return
      }
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `snapshot_${props.vid}_${props.currentTime}.png`
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(url)
    }, 'image/png')
  } catch (error) {
    console.error(error)
  }
}

const destroy = () => {
  return new Promise((resolve) => {
    if (player) {
      player.off(Mpegts.Events.ERROR, onError)
      player.pause()
      player.unload()
      player.detachMediaElement()
      player.destroy()
      player = null
      ele.currentTime = 0
      seeking.value = false
      currentTime.value = 0
    }
    if (ele) {
      ele.removeEventListener('playing', onPlay)
      ele.removeEventListener('ended', onEnded)
      ele.removeEventListener('abort', onEnded)
      ele.removeEventListener('pause', onPause)
      ele.removeEventListener('waiting', onPause)
      ele.removeEventListener('timeupdate', onTimeupdate)
      ele.removeEventListener('ratechange', onRatechange)
      ele.removeEventListener('volumechange', onVolumechange)
      ele.removeEventListener('seeking', onSeeking)
      ele.removeEventListener('seeked', onSeeked)
    }
    resolve()
  })
}

const onPlay = () => {
  emit('play')
}

const onPause = (e) => {
  emit('pause')
}

const onError = (type, detail) => {
  let msg = ''
  switch (type) {
    case Mpegts.ErrorTypes.NETWORK_ERROR:
      switch (detail) {
        case Mpegts.ErrorDetails.NETWORK_EXCEPTION:
          msg = 'Related to any other issues with the network.'
          break
        case Mpegts.ErrorDetails.NETWORK_TIMEOUT:
          msg = 'Related to timeout request issues.'
          break
        case Mpegts.ErrorDetails.NETWORK_STATUS_CODE_INVALID:
          msg = 'Related to an invalid HTTP status code.'
          break
        case Mpegts.ErrorDetails.NETWORK_UNRECOVERABLE_EARLY_EOF:
          msg = 'Related to unexpected network EOF which cannot be recovered.'
          break
      }
      break
    case Mpegts.ErrorTypes.MEDIA_ERROR:
      switch (detail) {
        case Mpegts.ErrorDetails.MEDIA_MSE_ERROR:
          msg = "Related to MediaSource's error such as decode issue."
          break
        case Mpegts.ErrorDetails.MEDIA_FORMAT_ERROR:
          msg = 'Related to any invalid parameters in the media stream.'
          break
        case Mpegts.ErrorDetails.MEDIA_FORMAT_UNSUPPORTED:
          msg = 'The input MediaDataSource format is not supported.'
          break
        case Mpegts.ErrorDetails.MEDIA_CODEC_UNSUPPORTED:
          msg = 'The media stream contains video/audio codec which is not supported.'
          break
      }
      break
    default:
      msg = 'unknow error'
      break
  }
  emit('error', msg)
  emit('ended')
}

const onEnded = () => {
  emit('ended')
}

const onSeeking = () => {
  seeking.value = true
}

const onSeeked = () => {
  seeking.value = false
}

const onTimeupdate = () => {
  const ct = Math.floor(ele.currentTime)
  if (Math.abs(ct - currentTime.value) >= 1) {
    currentTime.value = ct
    emit('timeupdate', currentTime.value)
  }
}

const onRatechange = () => {
  emit('ratechange', ele.playbackRate)
}

const onVolumechange = () => {
  emit('volumechange', ele.volume)
}

const onDblClick = () => {
  if (document.fullscreenElement) {
    return
  }
  if (ele) {
    isFullscreen.value = !isFullscreen.value
    if (isFullscreen.value) {
      ele.requestFullscreen().catch((error) => {
        console.error(error)
      })
    } else {
      ele.exitFullscreen().catch((error) => {
        console.error(error)
      })
    }
  }
}

onMounted(() => {
  initPlayer()
})

watch(
  () => props.url,
  () => {
    initPlayer()
  }
)

defineExpose({
  play,
  pause,
  resume,
  seek,
  destroy,
  muted,
  setVolume,
  setRate,
  snapshot,
})
</script>

<template>
  <div>
    <video
      :src="url"
      :id="vid"
      crossorigin="anonymous"
      muted
      class="w-full h-full"
      @dblclick="onDblClick"
    ></video>
  </div>
</template>

<style lang="scss" scoped>
video {
  object-fit: fill;
}
</style>

时间轴

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'

const props = defineProps({
  min: {
    type: Number,
    default: 0
  },
  max: {
    type: Number,
    default: 100
  },
  step: {
    type: Number,
    default: 1
  },
  value: {
    type: Number,
    default: 0
  },
  disabled: {
    type: Boolean,
    default: false
  },
  showTooltip: {
    type: Boolean,
    default: false
  },
  tooltipClass: {
    type: String,
    default: ''
  },
  formatTooltip: {
    type: Function,
    default: value => value
  },
  barHeight: {
    type: Number,
    default: 24
  },
  barColor: {
    type: String,
    default: '#ebe6e7'
  },
  handleColor: {
    type: String,
    default: '#4CAF50'
  },
  marks: {
    type: Array,
    default: () => []
  },
  pieces: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['change'])
const currentValue = ref(0)
const percent = ref(0)
const isHover = ref(false)
const tooltipRef = ref(null)

const showTooltip = computed(() => {
  return !props.disabled && (isHover.value || props.showTooltip)
})

const cssVar = computed(() => {
  return {
    '--slider-bar-height': `${props.barHeight}px`,
    '--slider-bar-color': props.barColor,
    '--slider-handle-color': props.handleColor,
    '--slider-handle-wdith': `${percent.value * 100}%`
  }
})

const pieceStyleVar = computed(() => {
  return props.pieces.map(piece => {
    return {
      ...piece,
      style: {
        width: `${((piece.max - piece.min) / (props.max - props.min)) * 100}%`,
        left: `${((piece.min - props.min) / (props.max - props.min)) * 100}%`,
        backgroundColor: piece.color
      }
    }
  })
})

const tooltipStyleVar = computed(() => {
  if (!tooltipRef.value) return {}
  const rect = tooltipRef.value.getBoundingClientRect()
  const parentRect = tooltipRef.value.parentNode.getBoundingClientRect()
  let translate = '-50%'
  let left = '50%'
  if (parentRect.width * percent.value < rect.width / 2) {
    translate = '-15%'
    left = '15%'
  }
  if (parentRect.width * percent.value + rect.width / 2 > parentRect.width) {
    translate = '-85%'
    left = '85%'
  }
  return {
    transform: `translate(${translate})`,
    '--slider-tooltip-left': `${left}`
  }
})

const decimal = computed(() => {
  const str = String(props.step)
  const decimalIndex = str.indexOf('.')
  return decimalIndex === -1 ? 0 : str.length - decimalIndex - 1
})

let isMouseDown = false

const onMouseDown = e => {
  if (props.disabled) return
  isMouseDown = true
  isHover.value = true
}

const onMouseUp = e => {
  if (e.type !== 'mouseup') {
    isHover.value = false
  }
  if (!isMouseDown) {
    return
  }
  isMouseDown = false
  emit('change', currentValue.value)
}

const onMouseMove = e => {
  if (props.disabled || !isMouseDown) return
  calcValue(e)
}

const onClick = e => {
  if (props.disabled) return
  calcValue(e)
  emit('change', currentValue.value)
}

const findNext = value => {
  if (!props.pieces.length) {
    return Math.min(Math.max(value, props.min), props.max)
  }
  let next = props.pieces.find(
    piece => piece.min <= value && value <= piece.max
  )
  if (next) {
    return value
  }
  next = props.pieces.find(piece => piece.min > value)
  if (next) {
    return next.min
  }
  return props.pieces[props.pieces.length - 1].max
}

const calcValue = e => {
  const slider = e.currentTarget
  const offsetWidth = slider.offsetWidth
  const clientX = e.clientX || e.touches[0].clientX
  const rect = slider.getBoundingClientRect()
  const percent1 = Math.min(Math.max((clientX - rect.left) / offsetWidth, 0), 1)
  const value = Number(
    ((props.max - props.min) * percent1 + props.min).toFixed(decimal.value)
  )
  currentValue.value = findNext(value)
  percent.value = (currentValue.value - props.min) / (props.max - props.min)
}

watch(
  () => props.value,
  value => {
    if (value < props.min || value > props.max || isMouseDown) {
      return
    }
    currentValue.value = findNext(value)
    percent.value = Math.min(
      Math.max((currentValue.value - props.min) / (props.max - props.min), 0),
      1
    )
  },
  {
    immediate: true
  }
)
</script>

<template>
  <div
    class="slider w-full relative px-4 select-none"
    :class="{ slider__disabled: props.disabled }"
    :style="[cssVar]"
  >
    <div
      class="bar rounded-2xl relative"
      @mouseenter="isHover = true"
      @mousedown="onMouseDown"
      @touchstart="onMouseDown"
      @mousemove="onMouseMove"
      @touchmove="onMouseMove"
      @mouseup="onMouseUp"
      @mouseleave="onMouseUp"
      @touchend="onMouseUp"
      @touchcancel="onMouseUp"
      @click="onClick"
    >
      <div
        v-if="!props.disabled"
        class="pieces absolute left-0 right-0 h-full rounded-2xl overflow-hidden"
      >
        <div
          v-for="piece in pieceStyleVar"
          :key="piece.min"
          :style="[piece.style]"
          class="absolute h-full"
        ></div>
      </div>
      <div class="handle relative z-1 rounded-l-2xl"></div>
    </div>
    <div
      v-if="showTooltip"
      class="tooltip absolute left-4 right-4 z-50 h-6"
      :class="tooltipClass"
    >
      <div
        ref="tooltipRef"
        class="tooltip__popper relative inline-block bg-gray-700 text-white rounded text-sm px-2 py-1"
        :style="[tooltipStyleVar]"
      >
        {{ formatTooltip(currentValue) }}
      </div>
    </div>
    <div
      v-if="marks.length > 0"
      class="marks w-full relative h-6"
    >
      <div
        class="mark absolute whitespace-pre transform-[translate(-50%)]"
        v-for="mark in marks"
        :key="mark.value"
        :style="{
          left: `${((mark.value - props.min) / (props.max - props.min)) * 100}%`
        }"
      >
        {{ mark.label }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.slider {
  &.slider__disabled {
    cursor: not-allowed;

    .handle {
      background: transparent;
    }
  }
  .bar {
    height: var(--slider-bar-height);
    background-color: var(--slider-bar-color);
  }
  .handle {
    height: var(--slider-bar-height);
    background-color: var(--slider-handle-color);
    width: var(--slider-handle-wdith);
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(50%, -50%);
      width: var(--slider-bar-height);
      height: var(--slider-bar-height);
      background-color: white;
      border-radius: 50%;
      cursor: grab;
      box-shadow: inset 0 0 0 1px var(--slider-handle-color);
    }
  }
  .tooltip {
    top: 0;
    transform: translate(0, -150%);
    .tooltip__popper {
      left: var(--slider-handle-wdith);
      &::before {
        content: '';
        position: absolute;
        top: 96%;
        left: var(--slider-tooltip-left);
        transform: translate(-50%);
        border: 5px solid transparent;
        border-top-color: var(--color-gray-700);
      }
    }
  }
}
</style>

主页面

<script setup>
import { onMounted, nextTick, ref, reactive, computed, useTemplateRef } from 'vue'
import Slider from './components/Slider.vue'
import Player from './components/Player.vue'
import { Icon } from '@iconify/vue'

const currentDate = ref('2025-10-30')
const currentTime = ref(0)
const status = reactive([0, 0, 0, 0])
const sliderMarks = reactive([])
const sliderPieces = ref([])
const cameras = ref([0, 1, 2, 3])
const isMuted = ref(true)
const isFullscreen = ref(false)
const rate = ref(1)
const playerRefs = useTemplateRef('players')

const videoList = computed(() => {
  const lists = [] // 视频列表
  const arr = []
  cameras.value.forEach((id) => {
    arr[id] = []
  })
  lists.forEach((el) => {
    const cameraId = Number(el.cameraId)
    if (typeof arr[cameraId] === 'undefined') {
      return
    }
    arr[cameraId].push({
      ...el,
      cameraId,
      begin: new Date(el.beginT).getTime() / 1000,
      end: new Date(el.endT).getTime() / 1000,
    })
  })
  arr.forEach((el) => {
    el.sort((a, b) => {
      return new Date(a.beginT).getTime() - new Date(b.beginT).getTime()
    })
  })
  return arr
})

const urls = computed(() => {
  const data = []
  cameras.value.forEach((id) => {
    data.push({
      id: `camera${id}`,
      url: calcUrl(id, currentTime.value),
      startTime: calcTimeDiff(id, currentTime.value),
    })
  })
  return data
})

const isPlaying = computed(() => {
  let flag = false
  status.forEach((el) => {
    if (el) {
      flag = true
    }
  })
  return flag
})

const zeroTime = computed(() => {
  return new Date(`${currentDate.value} 00:00:00`).getTime() / 1000
})

const rateStr = computed(() => {
  return `${rate.value.toFixed(1)}X`
})

const currentTimeStr = computed(() => {
  return formatSliderTooltip(currentTime.value)
})

const calcUrl = (cameraId, time) => {
  if (!videoList.value || !videoList.value[cameraId]) {
    return ''
  }
  const index = videoList.value[cameraId].findIndex(
    (item) => item.begin - zeroTime.value <= time && item.end - zeroTime.value >= time
  )
  if (index === -1) {
    return ''
  }
  return videoList.value[cameraId][index].videourl
}

const calcTimeDiff = (cameraId, time) => {
  if (!videoList.value || !videoList.value[cameraId]) {
    return 0
  }
  const index = videoList.value[cameraId].findIndex(
    (item) => item.begin - zeroTime.value <= time && item.end - zeroTime.value >= time
  )
  if (index === -1) {
    return 0
  }
  return time + zeroTime.value - videoList.value[cameraId][index].begin
}

const calcMinTime = () => {
  if (!videoList.value) {
    return 0
  }
  let min = 0
  for (let i = 0; i < videoList.value.length; i++) {
    if (videoList.value[i].length === 0) {
      return 0
    }
    if (min === 0 || videoList.value[i][0].begin < min) {
      min = videoList.value[i][0].begin
    }
  }
  return min
}

const calcTimePieces = () => {
  if (!videoList.value) {
    return []
  }
  const pieces = []
  const timeSet = new Set()
  for (let i = 0; i < videoList.value.length; i++) {
    if (videoList.value[i].length === 0) {
      continue
    }
    for (let j = 0; j < videoList.value[i].length; j++) {
      for (let k = videoList.value[i][j].begin; k <= videoList.value[i][j].end; k++) {
        timeSet.add(k - zeroTime.value)
      }
    }
  }
  const timeArr = Array.from(timeSet).sort((a, b) => a - b)
  for (let i = 0; i < timeArr.length; i++) {
    if (i === 0 || timeArr[i] - timeArr[i - 1] > 1) {
      pieces.push({
        min: timeArr[i],
        max: timeArr[i],
        color: '#f00',
      })
    }
    if (i === timeArr.length - 1 || timeArr[i + 1] - timeArr[i] > 1) {
      pieces[pieces.length - 1].max = timeArr[i]
    }
  }
  return pieces
}

const formatSliderTooltip = (value) => {
  const hours = Math.floor(value / 3600)
  const minutes = Math.floor((value % 3600) / 60)
  const seconds = Math.floor(value % 60)
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds
    .toString()
    .padStart(2, '0')}`
}

const onError = (index, message) => {
  console.log('error', message, index)
  status[index] = 0
}

const onEnded = (index) => {
  console.log('ended', index)
}

const onPause = (index) => {
  status[index] = 0
}

const onPlay = (index) => {
  status[index] = 1
}

const onTimeUpdate = (index, time) => {
  const currentItem = videoList.value[index].find(
    (item) =>
      item.begin - zeroTime.value <= currentTime.value &&
      item.end - zeroTime.value >= currentTime.value
  )
  if (!currentItem) {
    return
  }
  const t = currentItem.begin + time - zeroTime.value
  if (t > currentTime.value) {
    currentTime.value = t
  } else {
    const diff = currentTime.value - t
    if (diff < 2 || !isPlaying.value) {
      return
    }
    if (playerRefs.value[index]) {
      playerRefs.value[index].seek(currentTime.value)
    }
  }
}

const onVolumechange = (index, volume) => {
  isMuted.value = volume === 0
}

const onRatechange = (index, val) => {
  rate.value = val
}

const onClickPause = () => {
  playerRefs.value.forEach((el) => {
    el.pause()
  })
}
const onClickPlay = () => {
  playerRefs.value.forEach((el) => {
    el.resume()
  })
}

const onClickMuted = () => {
  playerRefs.value.forEach((el) => {
    el.muted()
  })
}
const onClickVolume = () => {
  playerRefs.value.forEach((el) => {
    el.setVolume(1)
  })
}

const onClickRate = () => {
  let val = rate.value + 1
  if (val > 3) {
    val = 1
  }
  playerRefs.value.forEach((el) => {
    el.setRate(val)
  })
}

const onClickSnapshot = () => {
  playerRefs.value.forEach((el) => {
    el.snapshot()
  })
}

const onClickFullscreen = () => {
  if (isFullscreen.value) {
    document.exitFullscreen()
  } else {
    document.documentElement.requestFullscreen()
  }
  isFullscreen.value = !isFullscreen.value
}

const onSliderChange = (value) => {
  let sameUrl = false
  cameras.value.forEach((id) => {
    const target = calcUrl(id, value)
    const source = urls.value[id]
    if (target === source) {
      sameUrl = true
      playerRefs.value[id].seek(value - currentTime.value)
    }
  })
  if (!sameUrl) {
    currentTime.value = value
  }
}

onMounted(() => {
  for (let i = 0; i < 24; i++) {
    const time = i * 3600
    sliderMarks.push({
      value: time,
      label: formatSliderTooltip(time).substring(0, 5),
    })
  }
  sliderPieces.value = calcTimePieces()
  currentTime.value = calcMinTime() - zeroTime.value
})
</script>

<template>
  <div class="flex flex-col h-full px-3 -mr-2.5 relative">
    <div class="flex flex-1 flex-wrap gap-2.5 my-3 overflow-hidden">
      <Player
        v-for="(item, index) in urls"
        ref="players"
        :key="index"
        :url="item.url"
        :startTime="item.startTime"
        :currentTime="currentTimeStr"
        :vid="item.id"
        :rate="rate"
        class="w-[calc(50%-10px)] h-[calc(50%-10px)]"
        @error="onError(index, $event)"
        @ended="onEnded(index)"
        @pause="onPause(index)"
        @play="onPlay(index)"
        @timeupdate="onTimeUpdate(index, $event)"
        @volumechange="onVolumechange(index, $event)"
        @ratechange="onRatechange(index, $event)"
      />
    </div>
    <Slider
      :value="currentTime"
      :max="86400"
      :formatTooltip="formatSliderTooltip"
      :marks="sliderMarks"
      :pieces="sliderPieces"
      @change="onSliderChange"
    />
    <div class="absolute bottom-20 left-4 z-50 w-12 h-12 rounded-full bg-black/50">
      <Icon
        v-if="isPlaying"
        icon="ep:video-pause"
        height="48"
        color="#fff"
        class="cursor-pointer"
        @click="onClickPause"
      />
      <Icon
        v-else
        icon="ep:video-play"
        height="48"
        color="#fff"
        class="cursor-pointer"
        @click="onClickPlay"
      />
    </div>
    <div class="absolute bottom-20 right-10 z-50 w-12 h-12 rounded-full bg-black/50 pt-2">
      <Icon
        v-if="isMuted"
        icon="ep:mute"
        height="32"
        color="#fff"
        class="cursor-pointer mx-auto"
        @click="onClickVolume"
      />
      <Icon
        v-else
        icon="ep:microphone"
        height="32"
        color="#fff"
        class="cursor-pointer mx-auto"
        @click="onClickMuted"
      />
    </div>
    <div
      class="absolute bottom-20 right-25 z-50 w-12 h-12 rounded-full bg-black/50 leading-12 text-center"
    >
      <span class="text-white cursor-pointer" @click="onClickRate">
        {{ rateStr }}
      </span>
    </div>
    <div class="absolute bottom-20 right-40 z-50 w-12 h-12 rounded-full bg-black/50 pt-2">
      <Icon
        icon="ep:camera"
        height="32"
        color="#fff"
        class="cursor-pointer mx-auto"
        @click="onClickSnapshot"
      />
    </div>
    <div class="absolute top-4 right-6 z-50 w-12 h-12 rounded-full bg-black/50 pt-2">
      <Icon
        :icon="isFullscreen ? 'mdi:fullscreen-exit' : 'mdi:fullscreen'"
        height="32"
        color="#fff"
        class="cursor-pointer mx-auto"
        @click="onClickFullscreen"
      />
    </div>
  </div>
</template>

难点

• 多视频同步播放
• 播放指定片段的指定时间点
• 视频切换时，保持播放进度
• 展示当前播放时间点

总结

通过 Vue 3 + TypeScript + flv.js + TailwindCSS 技术栈，我们成功实现了一个功能完善的多视角监控页面。但是由于flv.js对H.265的支持不是很好，改为mpegts.js能更高效处理 H.264、H.265（HEVC）视频编码和 AAC 音频编码，适配高清甚至 4K 监控场景.不过这两都是靠GPU来解码H.265视频,遇到一些比较老旧的电脑,可能出现无法播放的情况.要适配更多的电脑,需要jessibuca等播放器来解码H.265视频.