标题前端开发进行视频监控。rtmp格式在2020年底就不再进行支持，所以要让后端将rtmp格式的视频格式转换成flv格式的。
一、基于vue的页面开发：安装flv插件，使用import引入
npm install --save flv.js
<template>
<div id="welcome_page">
<el-row>
<el-col :span="12">
<div class="mainContainer">
<video id="videoElement1" class="centeredVideo" controls autoplay width="90%" height="576">Your browser is too old which doesn't support HTML5 video.</video>
</div>
<br>
<div class="controls">
<!--<button onclick="flv_load()">加载</button>-->
<button onclick="flv_start()">开始</button>
<button onclick="flv_pause()">暂停</button>
<button onclick="flv_destroy()">停止</button>
<input style="width:100px" type="text" name="seekpoint" />
<button onclick="flv_seekto()">跳转</button>
</div>
</el-col>
<el-col :span="12">
<div class="mainContainer">
<video id="videoElement2" class="centeredVideo" controls autoplay width="90%" height="576">Your browser is too old which doesn't support HTML5 video.</video>
</div>
<br>
<div class="controls">
<!--<button onclick="flv_load()">加载</button>-->
<button onclick="flv_start()">开始</button>
<button onclick="flv_pause()">暂停</button>
<button onclick="flv_destroy()">停止</button>
<input style="width:100px" type="text" name="seekpoint" />
<button onclick="flv_seekto()">跳转</button>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import flvjs from "flv.js";
export default ({
name: 'Welcome',
mounted () {
var videoElement1 = document.getElementById('videoElement1');
var videoElement2 = document.getElementById('videoElement2');
if (flvjs.isSupported()) {
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://39.101.176.23/live?port=54321&app=myapp&stream=video_test'
});
flvPlayer.attachMediaElement(videoElement1);
flvPlayer.load();
}
if (flvjs.isSupported()) {
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://39.101.176.23/live?port=54321&app=myapp&stream=video_test'
});
flvPlayer.attachMediaElement(videoElement2);
flvPlayer.load();
}
function flv_start() {
player.play();
}
},
})
</script>
<style scoped>
</style>
二、基于普通html开发：直接引入flv
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>flv.js demo</title>
<style>
.mainContainer {
display: block;
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.urlInput {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
}
.centeredVideo {
display: block;
width: 100%;
height: 576px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
.controls {
display: block;
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="mainContainer">
<video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too old which doesn't support HTML5 video.</video>
</div>
<br>
<div class="controls">
<button onclick="flv_start()">开始</button>
<button onclick="flv_pause()">暂停</button>
<button onclick="flv_destroy()">停止</button>
<input style="width:100px" type="text" name="seekpoint" />
<button onclick="flv_seekto()">跳转</button>
</div>
<script src="flv.min.js"></script>
<script>
var player = document.getElementById('videoElement');
if (flvjs.isSupported()) {
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://39.101.176.23/live?port=54321&app=myapp&stream=video_test'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
}
function flv_start() {
player.play();
}
function flv_pause() {
player.pause();
}
function flv_destroy() {
player.pause();
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
}
function flv_seekto() {
player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
}
</script>
</body>
</html>