vue实现flv格式视频播放

公司项目需要实现摄像头实时视频播放，flv格式的视频。先百度使用flv.js插件实现，但是两个摄像头一个能放一个不能放，没有找到原因。（开始两个都能放，后端更改地址后不有一个不能放）但是在另一个系统上是可以播放的。使用的是jessibuca.js

jessibuca.js实现视频播放

1、下载jessibuca.js包

这三个文件需要直接放到public文件夹里，不能在添加文件夹放置。

2、创建VideoPlayer.vue文件

html 复制代码

<template>
    <div id="container" ref="container"></div>
</template>
<script>
export default {
    name: 'DemoPlayer',
    props: {
        videoUrl: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            jessibuca: null,
            version: '',
            wasm: false,
            vc: 'ff',
            playing: false,
            quieting: true,
            loaded: false, // mute
            showOperateBtns: false,
            showBandwidth: false,
            err: '',
            speed: 0,
            performance: '',
            volume: 1,
            rotate: 0,
            useWCS: false,
            useMSE: true,
            useOffscreen: false,
            recording: false,
            recordType: 'webm',
            scale: 0
        }
    },
    mounted() {
        this.create()
        window.onerror = (msg) => (this.err = msg)
    },
    unmounted() {
        this.jessibuca.destroy()
    },
    methods: {
        create(options) {
            options = options || {}
            this.jessibuca = new window.Jessibuca(
                Object.assign(
                    {
                        container: this.$refs.container,
                        videoBuffer: 0.2, // Number(this.$refs.buffer.value), // 缓存时长
                        isResize: false,
                        useWCS: this.useWCS,
                        useMSE: this.useMSE,
                        text: '',
                        // background: "bg.jpg",
                        loadingText: '疯狂加载中...',
                        // hasAudio:false,
                        debug: true,
                        supportDblclickFullscreen: true,
                        showBandwidth: this.showBandwidth, // 显示网速
                        operateBtns: {
                            fullscreen: this.showOperateBtns,
                            screenshot: this.showOperateBtns,
                            play: this.showOperateBtns,
                            audio: this.showOperateBtns
                        },
                        vod: this.vod,
                        forceNoOffscreen: !this.useOffscreen,
                        isNotMute: true,
                        timeout: 10
                    },
                    options
                )
            )
            var _this = this
            this.jessibuca.on('pause', function () {
                console.log('on pause')
                _this.playing = false
            })
            this.jessibuca.on('play', function () {
                console.log('on play')
                _this.playing = true
            })

            this.jessibuca.on('mute', function (msg) {
                console.log('on mute', msg)
                _this.quieting = msg
            })

            this.jessibuca.on('error', function (error) {
                console.log('error', error)
            })

            this.jessibuca.on('performance', function (performance) {
                var show = '卡顿'
                if (performance === 2) {
                    show = '非常流畅'
                } else if (performance === 1) {
                    show = '流畅'
                }
                _this.performance = show
            })

            this.jessibuca.on('play', () => {
                this.playing = true
                this.loaded = true
                this.quieting = this.jessibuca.isMute()
            })
        },
        play(videoUrl) {
            if (videoUrl) {
                this.jessibuca.play(videoUrl)
            } else {
                // this.$message.error('播放地址出错')
                this.destroy()
            }
        },
        mute() {
            this.jessibuca.mute()
        },
        cancelMute() {
            this.jessibuca.cancelMute()
        },

        pause() {
            this.jessibuca.pause()
            this.playing = false
            this.err = ''
            this.performance = ''
        },
        destroy() {
            if (this.jessibuca) {
                this.jessibuca.destroy()
            }
            this.create()
            this.playing = false
            this.loaded = false
            this.performance = ''
        }
    }
}
</script>
<style>
#container {
    background: rgba(13, 14, 27, 0.7);
    width: 100%;
    height: 100%;
}
</style>

3、使用组件

引入

js 复制代码

import VideoPlayer from '@/components/VideoPlayer.vue'

使用

html 复制代码

<VideoPlayer ref="VideoPlayer"></VideoPlayer>

播放

js 复制代码

let url = 'http://182.150.58.94:15280/rtp/44010200492000000001_34020000001320000110.flv'
this.$refs.VideoPlayer.play(url)

效果

参考文档：

jessibuca-api-文档
 参考官方实例 jessibuca-vue-demo