关于RTSP在HTML5前端播放问题解决办法

最近半个月，我一直在想办法将RTSP摄像头流放在HTML5中播放，期间研究过两种解决方式，在这里我就不说了，看到这篇文章的时候你们应该也多少了解了两种解决方案，不过都是收费的，L和E方法。

在文章最后我会提供我自己编写的一键启动RTSP摄像头到HTTP，只需在前端使用video标签即可播放

现在，我是利用vlc软件，将RTSP转成HTTP直接在前端利用 video 标签进行播放，前端代码可谓只需要一句即可
代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><video src="http://localhost:8111/live" style="width: 100%; height: 100%;"></video></body>
</html>

在这之前，我们需要在打开VLC

选中媒体中的流

找到网络，输入RTSP地址点击串流

弹框点击下一步

第二个框中选择HTTP，然后点击右侧添加

输入一个想映射到的端口号，随便写一个路径（不写也可以，这里我习惯用live），点击下一个

配置文件选择OGG，点击下一个

最后一步不用管，点击流即可

在浏览器中打开刚才写的前端即可播放
video中src格式：http://{地址}:{映射到的端口号}/{路径（即我使用的live，没有可不写）}

就可以正常播放了

如果想加入暂停等功能，请查看html5-video文档

vlc播放器地址：
https://www.videolan.org/

前端文件及RTSP一键转流工具：https://download.csdn.net/download/qq_43231901/10862074

只需把摄像头.exe文件放在vlc目录中，管理员启动即可

联系方式：binoculus@vip.qq.com

关于RTSP在HTML5前端播放问题解决办法相关推荐

django-vue-admin前端设置后台接口地址为127.0.0.1产生跨域问题解决办法
django-vue-admin前端设置后台接口地址为127.0.0.1产生跨域问题解决办法: 不能设置成127.0.0.1,设置成节点的ip地址即可解决. 应该是脚手架本身存在问题导致的.
国内最火的五款HTML5前端开发框架
2013-04-11 本文主要为大家推荐五款国内最火的HTML5前端开发框架,它们分别是腾讯团队开发的JX.淘宝团队开发的KISSY.百度团队开发的QWrap和Tangram,以及上海康尚实验室推出的 ...
Plyr – 简单，灵活的 HTML5 媒体播放器
Plyr 是一个简单的 HTML5 媒体播放器,包含自定义的控制选项和 WebVTT 字幕.它是只支持现代浏览器,轻量,方便和可定制的媒体播放器.还有的标题和屏幕阅读器的全面支持. 在线演示 ...
ps4看b站 f怎么调html5,b站html5,b站怎么切换到HTML5版播放器？
b站怎么切换到HTML5版播放器? 目前来说B站只能使用HTML5播放器,因为FIASH已经停止维护,所以现在不需要设置,只能使用HTML5播放器 b站怎么做切换到html5视频播放器 1. 在网页上 ...
html的音频播放,HTML5 音频播放 audio
众所周知,在HTML5诞生之前网页上要播放一段视频基本都是依靠flash插件,而HTML5诞生了和标签,使得在HTML5上播放视频或者音频就像显示图片那么轻松如果我们现在不需要使用浏览器内部的aud ...
转行HTML5前端开发，该怎么学才能最快入门
首先无论你要学习任何技能,必须有一个清晰的版图,什么是清晰的版图呢?首先了解你学的技术将来要从事什么工作,这个工作的条件是哪些? 然后你要有一个非常清晰的学习大纲,切记学习任何东西都要系统,不可胡乱的 ...
国内的优秀HTML5前端开发框架
国外优秀HTML5前端开发框架非常之多,如jQuery Mobile.Twitter Bootstrap.Sencha Touch以及BackBone.这里介绍的5款工具,其中4款是由互联网巨头腾讯. ...
尚硅谷《全套Java、Android、HTML5前端视频》
尚硅谷<全套Java.Android.HTML5前端视频> (百万谷粉推荐:史上最牛.最适合自学的全套视频.资料及源码) [尚硅谷官网资料导航] 谷粒学院在线学习:http://www.g ...
开发那些事儿：在Flv.js前端播放器中解析并绘制H.264编码中的SEI信息
流媒体中的SEI是指补充增强信息(Supplemental Enhancement Information),它提供了向视频码流中加入信息的办法,是H.264/H.265视频压缩标准的特性之一.SEI ...
前端播放rtmp协议的视频流文件
前端播放rtmp协议的视频流文件最近公司的项目中需要在大屏可视化的页面中的一个位置是视频监控的,需求大概是这样的: 大屏右下角布局中有六个div,每个可以实时播放监控视频点击某个视频全屏放大, 自 ...

关于RTSP在HTML5前端播放问题解决办法

关于RTSP在HTML5前端播放问题解决办法

关于RTSP在HTML5前端播放问题解决办法相关推荐

最新文章

热门文章