Vue implements flv format video playback

The company's project needs to realize the real-time video playback of the camera, and flvthe format of the video. First, Baidu used flv.js插件it to implement it, but one of the two cameras can be placed and the other cannot be placed, and the reason has not been found. (Both can be played at the beginning, and none of them can be played after the backend changes the address) But it can be played on another system. usingjessibuca.js

jessibuca.js implements video playback

1. Download jessibuca.js package

These three files need to be placed directly publicin the folder, not in the added folder.

2. Create VideoPlayer.vue file

<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. Use components

1. introduce

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

2. use

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

3. play

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

Effect

Reference documents:

jessibuca-api-document
reference official example jessibuca-vue-demo