html5 播放 rtmp html5播放rtsp

转载

mob64ca141677f9 2023-09-14 11:56:59

文章标签 html5 播放 rtmp web js html5 html 文章分类 HTML5 移动开发

在现代浏览器中如何播放RTSP流

前言
环境准备

1.下载并安装360极速浏览器
2.下载并安装VLC播放器
3.准备一个可以播放的rtsp地址

代码实操

前言

RTSP流在网页中进行播放，是一个非常普遍的需求。

然而对于大部分没有视频处理经验的人来说，确实是一个头疼的问题。

现在市面上开源的解决方案有很多，大多是通过服务代理转发。博主也在项目中使用过，但是并不稳定，稳定的又要收费。

在IE浏览器天下横行的年代，各种activex插件解决了各种疑难杂症。何懒IE一意孤行，与现代web标准背道而驰。导致activex插件与html5，鱼与熊掌不能兼得。

现在web开发已经是大前端的天下了，IE浏览器已经被很多公司抛弃了，那么我们还能在拥抱html5的同时使用activex插件吗？

博主告诉你答案：是可以的。

下面我们进入实操环境。

环境准备

1.下载并安装360极速浏览器

这里我只试过360极速浏览器，未试过360安全浏览器，有时间的朋友可以去验证一下。
点击这里下载360极速浏览器安装就不多说了，正常安装就好了。

2.下载并安装VLC播放器

点击这里下载VLC播放器下载后，点击安装。

安装时要注意一定不要把网页插件给取消了。
其实火狐浏览器也可以尝试能不能播放，有时间的朋友可以去验证一下。

3.准备一个可以播放的rtsp地址

rtsp地址大家去准备，博主是内网地址就不提供了。博主内试过把也网映射到公网上，也是可以播放的

代码实操

创建一下test.html页面，页面代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML5 VLC 播放 RTSP</title>
</head>
<body>
  <object type='application/x-vlc-plugin' id='vlc' events='false' width="800" height="500">
    <param name='mrl' value='rtsp://192.168.1.209:8557/sub_stream_1' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
  </object>
</body>
</html>