如何在网站上嵌入直播

为什么 RTSP 无法在浏览器中直接使用

RTSP 是为控制流媒体视频而设计的协议，但现代浏览器无法直接播放该协议。将 RTSP 地址粘贴进 HTML，或者以普通地址的方式打开它，页面上都不会出现视频画面。

要在网页上展示直播，必须先接收该视频流，将其转换为兼容格式，再通过网页播放器提供给观众。这正是 rtsp.me 所做的工作。

您将获得什么

• 现成代码可放置在页面上的播放器 HTML 代码
• 直播流适配在现代网页浏览器中播放
• 移动设备针对手机和平板电脑优化的观看体验
• 统计数据所有者可查看直播的访问统计

您无需自行开发播放器，也无需维护独立的视频转换系统。

第一步：准备直播流

首先在 rtsp.me 上添加 IP 摄像机，并等待视频成功开始播放。如果摄像机尚未连接，请参照指南《如何在网站上创建直播》。

1. 打开 rtsp.me 并登录您的账户。
2. 选择您已连接的摄像机。
3. 确认画面正常且直播运行稳定。
4. 打开嵌入设置或播放器代码页面。

第二步：获取 HTML 代码

rtsp.me 会为所选直播生成现成的 HTML 代码片段。请完整复制该代码，不要修改播放器地址或服务参数。

只要平台允许嵌入外部播放器，该代码就可以用在普通 HTML 网站、CMS 模板，或建站工具的自定义 HTML 模块中。

HTML 代码示例

<iframe
  src="https://rtsp.me/embed/WKZb7jUsUw5T9N4f/"
  style="width:100%; aspect-ratio:4/3; border:0;"
  title="RTSP streaming player"
  allow="fullscreen; autoplay"
  allowfullscreen>
  Iframes not supported. Stream <a href="https://rtsp.me/"
    title="rtsp video streaming service">rtsp.me</a> player
</iframe>

您实际使用的代码中会包含您自己直播的地址。请勿将其替换为示例标识符 WKZb7jUsUw5T9N4f。

嵌入播放器的效果示例

第三步：放置代码

1. 打开需要显示直播的页面。
2. 切换到 HTML 编辑模式，或添加一个用于嵌入代码的模块。
3. 将播放器代码粘贴到所需位置。
4. 保存并发布该页面。
5. 确认视频在电脑和手机浏览器中都能正常启动。

已发布的页面加载后，播放器会连接到 rtsp.me，并开始播放可用的直播流。

浏览器与移动设备

rtsp.me 不仅会针对电脑浏览器优化原始直播流，也会针对移动设备进行优化。访客无需安装 RTSP 观看软件，也无需输入任何摄像机凭据。

响应式播放器可以放置在页面容器中，使其宽度随屏幕自动调整。发布后，请分别检查手机竖屏与横屏方向下的效果，以及在较慢的移动网络下的页面表现。

观看质量还取决于摄像机设置以及现场可用的上传速度。相关建议可参见页面《推荐的 IP 摄像机设置》。

访问统计

直播所有者可以查看访问统计数据，这有助于您评估观众兴趣，并了解播放器在网站上的使用情况。

统计数据可在 rtsp.me 界面中查看。具体显示哪些指标，可能取决于直播设置和所使用的套餐。

通过 PHP 实现安全接入

对于公开直播，普通 HTML 代码已经足够。如果视频仅面向注册客户、员工或顾客开放，则可以通过服务器端 PHP 代码接入播放器。

在这种方式下，您的服务器会先检查用户的权限，然后为其生成唯一的播放器链接。该链接针对每位访客单独生成，不会永久保存在页面的公开 HTML 中。

1. 用户在您的网站上登录自己的账户。
2. PHP 代码检查该用户是否被允许观看。
3. 服务器使用 rtsp.me 的接入参数生成一个专属链接。
4. 页面仅将该链接提供给该用户的播放器。

关于 PHP 接入方式与允许的域名、密码、IP 封锁以及基于账户的访问方式之间的比较，请参见指南《如何防止直播被盗用》。

常见问题