同社のプロジェクトでは、カメラのリアルタイム ビデオ再生とflvビデオの形式を実現する必要があります。まず、Baiduflv.js插件を利用して実装しましたが、2台のカメラのうち1台は設置でき、もう1台は設置できず、原因は判明していません。(最初は両方とも再生できますが、バックエンドがアドレスを変更した後はどちらも再生できなくなります) ただし、別のシステムでは再生できます。を使用してjessibuca.js
jessibuca.js はビデオ再生を実装します
1. jessibuca.js パッケージをダウンロードする
publicこれら 3 つのファイルは、追加したフォルダーではなく、フォルダーに直接配置する必要があります。
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)
効果
