快捷導(dǎo)航

vue實現(xiàn)flv格式視頻播放效果

更新時間：2023年07月28日 15:58:45 作者：浮橋

這篇文章主要介紹了vue實現(xiàn)flv格式視頻播放,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

公司項目需要實現(xiàn)攝像頭實時視頻播放，flv格式的視頻。先百度使用flv.js插件實現(xiàn)，但是兩個攝像頭一個能放一個不能放，沒有找到原因。（開始兩個都能放，后端更改地址后不有一個不能放）但是在另一個系統(tǒng)上是可以播放的。使用的是jessibuca.js

jessibuca.js實現(xiàn)視頻播放

1、下載jessibuca.js包

這三個文件需要直接放到public文件夾里，不能在添加文件夾放置。

2、創(chuàng)建VideoPlayer.vue文件

<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, // 顯示網(wǎng)速
                        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、使用組件

引入

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

使用

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

播放

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

效果

參考文檔：

jessibuca-api-文檔

參考官方實例 jessibuca-vue-demo

vue中播放flv流視頻

1、安裝環(huán)境npm install video.jsnpm install flv.js

2、引入video，在main.js中引入

import videojs from "video.js";
import "video.js/dist/video-js.css";
Vue.prototype.$video = videojs;

在這里插入圖片描述

3、在播放flv流視頻代碼如下

<template>
  <div class="wrapper">
    <video id="videoElement" controls autoplay muted width="800px" height="600px">
    </video>
    <button @click="play">播放</button>
  </div>
</template>
<script>
  import flvjs from "flv.js";
  export default {
    data() {
      return {
        player: null,
      }
    },
    mounted() {
        if (flvjs.isSupported()) {
          var videoElement = document.getElementById('videoElement');
          this.flvPlayer = flvjs.createPlayer({
            type: 'flv',
        isLive: true,
        hasAudio: false,
            url: 'http://192.168.1.212/hdl/hlsram/live1.flv'
          });
          this.flvPlayer.attachMediaElement(videoElement);
          this.flvPlayer.load();
      	  this.flvPlayer.play();
        }
    },
    methods: {
      play() {
        this.flvPlayer.play();
      }
    },
    beforeDestroy() {
      // 播放器存在清除播放器
      if (this.player) {
         this.player.destroy()
       }
    }
  }
</script>
<style scoped>
  .wrapper {
    width: 800px;
    height: 600px;
    margin: 100px 30px;
    overflow: hidden;
    position: relative;
  }
  .iframe {
    width: 1024px;
    height: 608px;
    position: absolute;
    top: -150px;
    left: -120px;
  }
</style>

效果圖，本身電腦的原因存在延遲比較高

在這里插入圖片描述