Jessibuca是什么

• 是一个直播流播放器。

jessibuka.js 与 flv.js

• 之前项目中使用的一直是flv.js播放rtsp视频流

• flv.js 不支持H265，需要使用 flv-h265.js

• jessibuka.js 支持多种播放格式

jessibuka使用

• vue2 三个文件放在public下

• index.html 引入

• 创建jessibuka.vue

<template>
    <div id="container" ref="container"></div>
</template>
<script>
export default {
    name: 'JessibucaPlayer',
    props: {
        url: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            jessibuca: null,
            version: '',
            loaded: false, // mute
            err: '',
            performance: '',
            useWCS: true,
            useMSE: true,
            useOffscreen: false,
        }
    },
    watch: {
        url: {
            handler: function (newVal, oldVal) {
                if (newVal) {
                    if (this.jessibuca) {
                        this.jessibuca.destroy()
                    }
                    this.create()
                    this.play()
                }
            },
            immediate: true,
        },
    },
    mounted() {
        this.create()

        window.onerror = (msg) => (this.err = msg)
    },
    beforeDestroy() {
        this.jessibuca.destroy()
    },
    methods: {
        create(options) {
            options = options || {}
            this.jessibuca = new window.Jessibuca(
                Object.assign(
                    {
                        container: this.$refs.container,
                        videoBuffer: 1, // 缓存时长
                        isResize: false,
                        isFlv: true,
                        useWCS: this.useWCS,
                        useMSE: this.useMSE,
                        autoWasm: true,
                        hasAudio: false,
                        text: '',
                        // background: "bg.jpg",
                        loadingText: '疯狂加载中...',
                        // hasAudio:false,
                        debug: false,
                        supportDblclickFullscreen: true,
                        showBandwidth: false, // 显示网速
                        showPerformance: false, // 显示性能
                        forceNoOffscreen: !this.useOffscreen,
                        isNotMute: false,
                        timeout: 10,
                    },
                    options
                )
            )
            this.jessibuca.on('load', () => {
                console.log('on load')
            })
            this.jessibuca.on('pause', function () {
                this.$emit('pause')
            })

            // this.jessibuca.on("bps", function (bps) {
            //   // console.log('bps', bps);
            // });
            // let _ts = 0;
            // this.jessibuca.on("timeUpdate", function (ts) {
            //     console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
            //     _ts = ts;
            // });

            this.jessibuca.on('videoInfo', (info) => {
                this.$emit('media-info', info)
            })

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

            this.jessibuca.on('timeout', () => {
                console.log('timeout')
            })

            this.jessibuca.on('start', () => {
                console.log('frame start')
            })

            // this.jessibuca.on("performance", (performance)=> {
            //   var show = "卡顿";
            //   if (performance === 2) {
            //     show = "非常流畅";
            //   } else if (performance === 1) {
            //     show = "流畅";
            //   }
            // });
            this.jessibuca.on('play', () => {
                this.$emit('loaded')
            })
        },
        play() {
            if (this.jessibuca && this.url) {
                this.jessibuca.play(this.url)
            }
        },
        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 = ''
        },

        fullscreen() {
            this.jessibuca.setFullscreen(true)
        },
        exitFullscreen() {
            this.jessibuca.setFullscreen(false)
        },
        restartPlay(type) {
            if (type === 'mse') {
                this.useWCS = false
                this.useOffscreen = false
            } else if (type === 'wcs') {
                this.useMSE = false
            } else if (type === 'offscreen') {
                this.useMSE = false
            }

            this.destroy()
            setTimeout(() => {
                this.play()
            }, 100)
        },
    },
}
</script>

• 在需要的地方引入

<JessibucaPlayer @loaded="handleLoaded" @media-info="handleVideoInfo" :url="flvUrl"></JessibucaPlayer>