flv视频流播放

flv视频流播放

安装 ：npm install --save flv.js

<script setup >

import flvjs from 'flv.js'
import { onMounted, ref, onUnmounted } from 'vue'
const flvPlayer=ref('')
onMounted(() => { 
      console.log('isSupported: ' + flvjs.isSupported())
   console.log('是否支持点播视频：' + flvjs.getFeatureList().mseFlvPlayback)
   console.log(
      '是否支持httpflv直播流：' + flvjs.getFeatureList().mseLiveFlvPlayback
   )
   initFlv()
})
const initFlv = () => {
   const ele = document.getElementById('video-contianer')
   flvPlayer.value = flvjs.createPlayer({
      type: 'flv', // 指定视频类型
      isLive: true, // 开启直播
      hasAudio: false, // 关闭声音
      cors: true, // 开启跨域访问
      url: 'ws://223.71.21.171:14388/live?url=rtsp://admin:Cpes.60604766@119.177.128.46:37001/cam/realmonitor?channel=1&subtype=1', // 指定流链接
   })
   // 将flvjs对象和DOM对象绑定
   flvPlayer.value.attachMediaElement(ele)
   play()
   flvEvent()
}
 const play = () => {
   flvPlayer.value.load()
   flvPlayer.value.play()
}

// flvjs播放器事件侦听
const flvEvent = () => {
   // 视频错误信息回调
   flvPlayer.value.on(
      flvjs.Events.ERROR,
      (errorType, errorDetail, errorInfo) => {
         console.log(
            '类型:' + JSON.stringify(errorType),
            '报错内容' + errorDetail,
            '报错信息' + errorInfo
         )
      }
   )
}
</script>
<template>
     <video id="video-contianer" autoplay muted controls width="1024" height="576">
               Your browser is too old which doesn't support HTML5 video.
           </video>
</template>
<style scoped ></style>