vue+videojs动态切换flv视频流

vue+videojs播放flv格式监控视频流，及动态切换视频源地址

需求是要对接视频，往常使用的事海康视频插件，这次对接的视频流格式是flv也是海康和大华的视频 但是是在**管理的视频

下面展示一些 内联代码片。使用vue3.x+videojs+flv.js
依赖下载

"video.js": "^7.14.3",
"videojs-flvjs-es6": "^1.0.1",
"flv.js": "^1.6.2",

<script setup>
import { onMounted, onUnmounted, ref, watch } from 'vue'
import videojs from 'video.js'
import 'videojs-flvjs-es6'
import 'video.js/dist/video-js.css'

let myPlayer = null
const props = defineProps({
  videoUrl: {
    default: ''
  }
})

watch(
  () => props.videoUrl,
  url => {
    if (myPlayer) {
      myPlayer.dispose()
      myPlayer = null
      createDom()
      setTimeout(() => {
        url && init()
      }, 100)
    } else {
      url && init()
    }
  }
)

onMounted(() => {
  props.videoUrl && init()
})

function init() {
  myPlayer = videojs(
    document.getElementById('videoPlayer'),
    {
      autoplay: true, //自动播放，由于谷歌浏览器限制需设置静音muted: true，自动播放才会生效
      controls: true, //用户可以与之交互的控件
      loop: true, //视频一结束就重新开始
      muted: true, //默认情况下将使所有音频静音
      techOrder: ['html5', 'flvjs'], // 兼容顺序
      flvjs: {
        mediaDataSource: {
          isLive: false,
          cors: true,
          withCredentials: false
        }
      },
      sources: [
        {
          // type: 'video/rtsp'
          // type: 'rtmp/flv'
          src: props.videoUrl,
          type: 'video/x-flv'
        }
      ]
    },
    () => {
      myPlayer.log('play.....')
    }
  )
}

function createDom() {
  const newVideoElement = document.createElement('video')
  newVideoElement.id = 'videoPlayer'
  newVideoElement.style.width = '100%'
  newVideoElement.style.height = '100%'
  newVideoElement.className = 'video-js vjs-default-skin vjs-big-play-centered'
  newVideoElement.preload = 'auto'
  const oldVideoElement = document.getElementById('videoDom')
  oldVideoElement.appendChild(newVideoElement)
}

onUnmounted(() => {
  if (myPlayer) {
    myPlayer.dispose()
  }
})
</script>

<template>
  <div class="videoContainer" id="videoDom">
    <video id="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto"></video>
  </div>
</template>

<style lang="scss" scoped>
.videoContainer {
  width: 100%;
  height: 100%;
  .video-js {
    width: 100%;
    height: 100% !important;
    &.vjs-fluid {
      padding-top: 0 !important;
    }
  }
}
</style>