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

最新推荐文章于 2024-08-08 07:49:13 发布

Binoculus

最新推荐文章于 2024-08-08 07:49:13 发布

阅读量2w

点赞数 15

分类专栏： VLC 前端 HTML5 HTML RTSP 文章标签： RTSP HTML5 vlc 前端

本文链接：https://blog.csdn.net/qq_43231901/article/details/85101964

版权

VLC 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

HTML5

1 篇文章 0 订阅

订阅专栏

关于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

Binoculus

关注

15
点赞
踩
47

收藏

觉得还不错? 一键收藏
12
评论
关于RTSP在HTML5前端播放问题解决办法

关于RTSP在HTML5前端播放问题解决办法最近半个月，我一直在想办法将RTSP摄像头流放在HTML5中播放，期间研究过两种解决方式，在这里我就不说了，看到这篇文章的时候你们应该也多少了解了两种解决方案，不过都是收费的，L和E方法。在文章最后我会提供我自己编写的一键启动RTSP摄像头到HTTP，只需在前端使用video标签即可播放现在，我是利用vlc软件，将RTSP转成HTTP直接在前端利用...
复制链接

扫一扫

专栏目录