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>