前端开发视频监控（flv / rtmp 格式）

标题前端开发进行视频监控。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 οnclick="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><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>

前端开发视频监控（flv / rtmp 格式）相关推荐

OpenCV3.2+Qt5.8.0+Win10开发视频监控系统----Qt之设置应用程序图标
一.图标设置效果 (1)未设置前 (2)设置后二.设置步骤 1.首先,创建一个图标格式的位图文件,其中包含图标的图像. (1)这可以用例如微软Visual Studio,选择:文件 -> 新建 ...
VC6开发视频监控ActiveX控件总结
总结前段时间在VC6下使用MFC开发视频监控控件过程中遇到的一些问题. 1.获取控件当前所在路径,用于读取该目录下的INI配置文件获取配置文件路径 2.获取当前运行控件的电脑上的固定盘符列表,用于本 ...
尚硅谷h5前端开发视频
尚硅谷h5前端开发视频尚硅谷h5前端开发视频尚硅谷h5前端开发视频下载地址:百度网盘
视频融合 flv流格式对接
FLV 是FLASH VIDEO的简称,FLV流媒体格式是随着Flash MX的推出发展而来的视频格式.由于它形成的文件极小.加载速度极快,使得网络观看视频文件成为可能,它的出现有效地解决了视频文件导 ...
前端开发中常用的图片格式
在我们的日常开发中.必不可少会使用很多种图片. 我们需要根据业务场景来选择所使用的图片类型. 这里我整理了一些常用图片类型.他们的优缺点以及建议的使用场景. 如何在计算机中显示一张图片我们使用的计算 ...
前端开发中常见的图片格式
JPEG,GIF,PNG,最流行的是 jpeg 格式,可以把文件压缩到最小在 ps 以 jpeg 格式存储时,提供 11 级压缩级别. 网页中常见的图片格式有: 1.GIF图片格式,GIF是一种调色板 ...
QT开发小计：五、引入海康威视SDK开发视频监控系统环境搭建步骤及代码示例
1.新建项目: 标题 2.修改项目配置文件 .pro 增加内容: 3.导入头文件(*.h) 项目目录,新建文件夹 [include],从海康SDK把头文件拷出来 4.导入静态链接库文件(*.lib) ...
开发视频监控系统纪实四开康开发dll 修正
再搞了3个小时,终于发现网上给的SDK是针对网络硬盘的.靠!!! 为什么会发现?因为sdk里面有个login,我死活想不明白为什么要login. 短暂思考后,决定再去官方网站看看,果然被我发现了针对板 ...
传智播客视频39期 36期达内2016年前端开发视频
链接:https://pan.baidu.com/s/1CBAPHuVvrak56eK9RBtsjw 提取码:29vm 复制这段内容后打开百度网盘手机App,操作更方便哦

前端开发视频监控（flv / rtmp 格式）

标题前端开发进行视频监控。rtmp格式在2020年底就不再进行支持，所以要让后端将rtmp格式的视频格式转换成flv格式的。

一、基于vue的页面开发：安装flv插件，使用import引入

二、基于普通html开发：直接引入flv

前端开发视频监控（flv / rtmp 格式）相关推荐

最新文章

热门文章