首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue视频播放

vue实现flv格式视频播放效果

2023-07-28 15:58:46 作者：浮桥

这篇文章主要介绍了vue实现flv格式视频播放,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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

jessibuca.js实现视频播放

1、下载jessibuca.js包

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

2、创建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, // 显示网速
                        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、安装环境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>

效果图，本身电脑的原因存在延迟比较高