企业官网建设流程全解析

将 SRS 直播流嵌入 WordPress：SRS Player 插件完整实战指南

【免费下载链接】srsSRS is a simple, high-performance, AI-driven real-time media server supporting RTMP, WebRTC, HLS, HTTP-FLV, HTTP-TS, SRT, MPEG-DASH, and GB28181, with codec support for H.264, H.265, AV1, VP9, AAC, Opus, and G.711.项目地址: https://gitcode.com/GitHub_Trending/sr/srs

导读

本教程讲解如何通过官方SRS PlayerWordPress 插件，把自建 SRS 直播服务器上的HTTP-FLV、HLS、WebRTC三种直播流直接嵌入 WordPress 文章或页面中，让观众无需安装任何播放器即可在网站上观看直播。读完本文，你将掌握插件安装、shortcode 使用、播放器尺寸控制，以及解决 "HTTPS 网站无法播放 HTTP 视频流" 这一最常见坑位的完整方案。

本指南基于 SRS 官方博客教程 整理，并辅以当前仓库中的播放器页面、HTTP 服务与流媒体协议配置作为源码级佐证。

一、适用场景与前置条件

当你在服务器上通过一键脚本或 SRS 部署文档 搭建好 SRS 直播服务后，服务器会返回一组可用于播放的流地址，这些地址可以用内置播放器直接打开，也可以粘贴到 VLC 等桌面播放器中测试。但当你希望把直播画面直接嵌入自己的 WordPress 网站，让访客在网页内观看时，就需要本教程介绍的 SRS Player 插件。

开始之前，请确认以下前置条件已满足：

1. OBS 已安装：用于向 SRS 服务器推流（RTMP 推流地址通常形如rtmp://your_public_ipv4/live/livestream）。
2. SRS 服务器已就绪：能够对外提供 HTTP-FLV、HLS 或 WebRTC 播放地址，参考 SRS 一键搭建说明 与 HLS 部署示例。
3. WordPress 网站已搭建：具备管理员权限，可以进入插件管理页面。

全文统一使用占位符your_public_ipv4表示服务器公网 IP、your_domain_name表示域名，实际使用时请全部替换为你自己的地址。

二、理解你要嵌入的三种流地址

SRS 同一路推流（例如应用live、流名livestream）可以同时对外提供多种协议的播放地址，这正是 SRS 的核心能力：RTMP进、多协议出。嵌入 WordPress 前，先搞清楚每种协议对应的 URL 形态：

从源码层面看，SRS 通过http_remux配置把 RTMP 流转封装为 HTTP-FLV 流，默认挂载路径为[vhost]/[app]/[stream].flv（见 trunk/conf/http.flv.live.conf）；HLS 则由hls模块将 TS 分片写入 HTTP 目录，再通过内置 HTTP 服务器对外提供.m3u8索引文件；WebRTC 则通过webrtc://协议标识直接使用 UDP/SRTP 传输媒体。三种协议共用同一路livestream流，因此你只需要在 OBS 里推一路流，就能在 WordPress 上按需选择任意一种方式嵌入播放。

SRS 官方也提供了独立的 Web 播放器页面 trunk/research/players/srs_player.html，支持直接输入 HTTP-FLV/HLS URL 播放，其推荐的flv.js、hls.js等 HTML5 播放技术正是 SRS Player 插件在 WordPress 中渲染播放器的底层实现思路——插件本质上是在网页中基于这些 HTML5 播放内核加载你的流地址。

三、Step 1：下载并激活 SRS Player 插件

1. 登录 WordPress 后台，进入插件（Plugins）菜单，点击安装插件（Add New）按钮。
2. 在搜索框中输入SRS Player，即可找到官方插件（插件目录中名称为srs-player）。
3. 点击现在安装（Install Now），安装完成后点击激活（Activate）。

激活成功后，插件会在 WordPress 中注册一个名为srs_player的 shortcode（短代码），接下来的所有嵌入工作都围绕这个短代码展开。

四、Step 2：在文章或页面中嵌入直播流

1. 从你的 SRS 服务器后台复制想要嵌入的协议的播放地址。
2. 在 WordPress 中新建一篇文章（Post）或页面（Page）。
3. 在编辑器中插入对应的 shortcode。

SRS Player 插件支持三种协议的短代码，按需选择其一：

HLS 直播流：

[srs_player url="https://your_public_ipv4/live/livestream.m3u8"]

HTTP-FLV 直播流：

[srs_player url="https://your_public_ipv4/live/livestream.flv"]

WebRTC 直播流：

[srs_player url="webrtc://your_public_ipv4/live/livestream"]

其中 HLS 与 FLV 使用https://前缀、以.m3u8/.flv结尾的文件型地址，对应 SRS 内置 HTTP 服务器对外挂载的 HLS 索引与 FLV 封装流；WebRTC 则使用webrtc://前缀的会话型地址，符合 SRS 中webrtc://协议标识的 URL 规范（仓库 rtmp-url-vhost.md 中同样出现了webrtc://形式的地址示例）。

4. 点击发布（Publish），打开新发布的文章或页面，播放器便会出现在页面中。

HTTPS 兼容性警告（重要）：SRS 服务器的默认安装不会自动开启 HTTPS。如果你的 WordPress 站点使用了 SSL 证书（HTTPS），浏览器出于混合内容安全策略，会阻止页面加载来自 HTTP 服务器的视频资源，导致播放器黑屏无法播放。解决办法是：为 SRS 服务器也配置 HTTPS（见本文第六节），使流地址与站点保持同协议。

五、Step 3：调整播放器尺寸适配页面布局

默认情况下，播放器的显示尺寸等于你在 OBS 推流设置中设定的输出分辨率。当视频宽高比与 WordPress 主题的排版不匹配时，页面布局可能被撑开、显得不协调。此时可通过 shortcode 的width参数强制指定播放器宽度，高度会按流的宽高比自动等比缩放：

[srs_player url="https://your_public_ipv4/live/livestream.m3u8" width="320"]

例如上面这个短代码，会将播放器宽度固定为 320 像素，高度按流的原始宽高比自适应，从而与正文排版和谐共处。你还可以配合height等参数（若插件支持）进一步精确控制播放器占位区域。

六、Step 4：为 SRS 服务器配置 HTTPS（可选但强烈推荐）

适用场景：当你的 WordPress 站点启用了 SSL 证书，而 SRS 服务器仍使用明文 HTTP 时，视频将无法在站点内播放。要彻底解决此问题，需要为 SRS 服务器也配置 SSL 证书，使播放地址升级为https://或wss://。

SRS 官方提供了配套的 Let's Encrypt 一键 HTTPS 配置教程，核心步骤概览：

1. 配置 DNS 记录：在域名服务商处为服务器添加一条A记录，将your_domain_name指向服务器公网 IPyour_public_ipv4：

   A your_domain_name your_public_ipv4

   添加完成后，可通过ping your_domain_name验证解析是否生效。

2. 申请证书：登录 Oryx 控制台（http://your_domain_name/mgmt），进入System > HTTPS > Let's Encrypt，输入域名后点击提交。系统会自动调用certbot与 Let's Encrypt 服务器通信、完成域名所有权校验并签发免费证书。若申请多个域名，可用分号分隔（如domain.com;www.domain.com），但需先为每个域名添加对应的 A 记录。

3. 证书自动续期：Let's Encrypt 证书有效期约为 3 个月，Oryx 会每天检查一次，到期前自动续期并重载 Nginx 生效。可通过以下命令查看续期日志：

   docker logs platform |grep renew

   出现Certificate not yet due for renewal之类的输出即表示证书仍在有效期内、一切正常。

配置完成后，回到 WordPress 中把 shortcode 里的 URL 协议统一改为 HTTPS 对应的形式（HLS/FLV 使用https://），WebRTC 使用wss://或保持webrtc://配合 HTTPS 站点即可正常播放。

七、常见问题排查

八、结语

通过本教程，你已经完成了 SRS Player 插件的安装，并将 HLS、HTTP-FLV 或 WebRTC 直播流成功嵌入到 WordPress 的文章与页面中，同时掌握了通过width参数控制播放器布局、以及为 SRS 配置 HTTPS 以兼容加密站点的完整方案。整个链路可以概括为：OBS 推流 → SRS 多协议分发 → SRS Player 短代码嵌入 → 访客网页内直接观看。

如需深入了解 SRS 的多协议分发细节，可继续阅读仓库中的 HTTP-FLV 部署示例、HLS 部署示例 与 RTMP URL 规范，也可以在 trunk/3rdparty/srs-docs/doc 目录下找到更多部署与调优文档。

【免费下载链接】srsSRS is a simple, high-performance, AI-driven real-time media server supporting RTMP, WebRTC, HLS, HTTP-FLV, HTTP-TS, SRT, MPEG-DASH, and GB28181, with codec support for H.264, H.265, AV1, VP9, AAC, Opus, and G.711.项目地址: https://gitcode.com/GitHub_Trending/sr/srs