一、iframe加载显示视频、监控地址
可以支持rtsp流地址 \ MP3/MP4类型的地址
<iframe style="width: 100%;height: 550px;" :src="url" scrolling="no"></iframe>
二、flv.js通过video实现加载显示视频、监控地址
可以支持rtmp流地址
/**安装*/
npm install --save flv.js
/**主要代码*/
<template>
<div>
<video
id="myPlayer"
autoplay muted controls
width="100%" height="550px"
></video>
</div>
</template>
import flvjs from 'flv.js'
if (flvjs.isSupported()) {
this.videoElement = document.getElementById('myPlayer')
this.player = flvjs.createPlayer({
type: 'flv',
isLive: true,
hasAudio: false,
url: playUrl // 地址
})
this.player.attachMediaElement(this.videoElement)
this.player.load()
this.player.play()
// 断开重连机制
this.player.on(flvjs.Events.ERROR, (errType, errDetail) => {
console.log('网络波动,正在尝试连接中...')
if (this.player) {
this.reloadVideo()
}
})
}
destoryVideo () {
this.player.pause()
this.player.unload()
this.player.detachMediaElement()
this.player.destroy()
this.player = null
},
reloadVideo () {
this.destoryVideo()
this.openVideo()
},
closeVideo () {
this.visible = false
document.getElementById('myPlayer').innerHTML = ''
}
video本身有一些事件按钮，但由于是直播，所以不适用，需要通过样式隐藏掉，然后自定义按钮
/* 隐藏掉video自带的控件 */
/* 所有控件 */
video::-webkit-media-controls-enclosure {
display: none;
}
/* 进度条 */
video::-webkit-media-controls-timeline {
display: none;
}
video::-webkit-media-controls-current-time-display {
display: none;
}
/* 音量按钮 */
video::-webkit-media-controls-mute-button {
display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
/* 音量的控制条 */
video::-webkit-media-controls-volume-slider {
display: none;
}
/* 播放按钮 */
video::-webkit-media-controls-play-button {
display: none;
}
实现全屏 暂停 播放功能
// 全屏
fullScreen () {
let dom = document.querySelector('#myPlayer')
if (dom.requestFullscreen) {
dom.requestFullscreen()
} else if (dom.webkitRequestFullScreen) {
dom.webkitRequestFullScreen()
}
},
// 暂停 播放功能
pauseOrPlay () {
if (this.videoState === 0) {
// 在播放，断流
this.videoState = 1
this.player.unload()
this.player.detachMediaElement()
} else {
// 已断流，重新拉流播放
this.videoState = 0
this.player.attachMediaElement(this.videoElement)
this.player.load()
this.player.play()
}
}