将 SRS 直播流嵌入 WordPressSRS 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 插件。开始之前请确认以下前置条件已满足OBS 已安装用于向 SRS 服务器推流RTMP 推流地址通常形如rtmp://your_public_ipv4/live/livestream。SRS 服务器已就绪能够对外提供 HTTP-FLV、HLS 或 WebRTC 播放地址参考 SRS 一键搭建说明 与 HLS 部署示例。WordPress 网站已搭建具备管理员权限可以进入插件管理页面。全文统一使用占位符your_public_ipv4表示服务器公网 IP、your_domain_name表示域名实际使用时请全部替换为你自己的地址。二、理解你要嵌入的三种流地址SRS 同一路推流例如应用live、流名livestream可以同时对外提供多种协议的播放地址这正是 SRS 的核心能力RTMP进、多协议出。嵌入 WordPress 前先搞清楚每种协议对应的 URL 形态协议播放 URL 示例特点仓库依据HLShttps://your_public_ipv4/live/livestream.m3u8兼容性最好延迟数秒适合大多数场景HTTP 服务部署示例HTTP-FLVhttps://your_public_ipv4/live/livestream.flv延迟低秒级PC 端体验好http.flv.live.confWebRTCwebrtc://your_public_ipv4/live/livestream延迟最低毫秒级适合互动直播RTMP/WebRTC URL 说明从源码层面看SRS 通过http_remux配置把 RTMP 流转封装为 HTTP-FLV 流默认挂载路径为[vhost]/[app]/[stream].flv见 trunk/conf/http.flv.live.confHLS 则由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 插件登录 WordPress 后台进入插件Plugins菜单点击安装插件Add New按钮。在搜索框中输入SRS Player即可找到官方插件插件目录中名称为srs-player。点击现在安装Install Now安装完成后点击激活Activate。激活成功后插件会在 WordPress 中注册一个名为srs_player的 shortcode短代码接下来的所有嵌入工作都围绕这个短代码展开。四、Step 2在文章或页面中嵌入直播流从你的 SRS 服务器后台复制想要嵌入的协议的播放地址。在 WordPress 中新建一篇文章Post或页面Page。在编辑器中插入对应的 shortcode。SRS Player 插件支持三种协议的短代码按需选择其一HLS 直播流[srs_player urlhttps://your_public_ipv4/live/livestream.m3u8]HTTP-FLV 直播流[srs_player urlhttps://your_public_ipv4/live/livestream.flv]WebRTC 直播流[srs_player urlwebrtc://your_public_ipv4/live/livestream]其中 HLS 与 FLV 使用https://前缀、以.m3u8/.flv结尾的文件型地址对应 SRS 内置 HTTP 服务器对外挂载的 HLS 索引与 FLV 封装流WebRTC 则使用webrtc://前缀的会话型地址符合 SRS 中webrtc://协议标识的 URL 规范仓库 rtmp-url-vhost.md 中同样出现了webrtc://形式的地址示例。点击发布Publish打开新发布的文章或页面播放器便会出现在页面中。HTTPS 兼容性警告重要SRS 服务器的默认安装不会自动开启 HTTPS。如果你的 WordPress 站点使用了 SSL 证书HTTPS浏览器出于混合内容安全策略会阻止页面加载来自 HTTP 服务器的视频资源导致播放器黑屏无法播放。解决办法是为 SRS 服务器也配置 HTTPS见本文第六节使流地址与站点保持同协议。五、Step 3调整播放器尺寸适配页面布局默认情况下播放器的显示尺寸等于你在 OBS 推流设置中设定的输出分辨率。当视频宽高比与 WordPress 主题的排版不匹配时页面布局可能被撑开、显得不协调。此时可通过 shortcode 的width参数强制指定播放器宽度高度会按流的宽高比自动等比缩放[srs_player urlhttps://your_public_ipv4/live/livestream.m3u8 width320]例如上面这个短代码会将播放器宽度固定为 320 像素高度按流的原始宽高比自适应从而与正文排版和谐共处。你还可以配合height等参数若插件支持进一步精确控制播放器占位区域。六、Step 4为 SRS 服务器配置 HTTPS可选但强烈推荐适用场景当你的 WordPress 站点启用了 SSL 证书而 SRS 服务器仍使用明文 HTTP 时视频将无法在站点内播放。要彻底解决此问题需要为 SRS 服务器也配置 SSL 证书使播放地址升级为https://或wss://。SRS 官方提供了配套的 Lets Encrypt 一键 HTTPS 配置教程核心步骤概览配置 DNS 记录在域名服务商处为服务器添加一条A记录将your_domain_name指向服务器公网 IPyour_public_ipv4A your_domain_name your_public_ipv4添加完成后可通过ping your_domain_name验证解析是否生效。申请证书登录 Oryx 控制台http://your_domain_name/mgmt进入System HTTPS Lets Encrypt输入域名后点击提交。系统会自动调用certbot与 Lets Encrypt 服务器通信、完成域名所有权校验并签发免费证书。若申请多个域名可用分号分隔如domain.com;www.domain.com但需先为每个域名添加对应的 A 记录。证书自动续期Lets 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 站点即可正常播放。七、常见问题排查现象可能原因处理方法播放器区域空白/黑屏WordPress 是 HTTPS 而流地址是 HTTP被浏览器混合内容策略拦截按第六节为 SRS 配置 HTTPS并把 shortcode 中的 URL 改为 HTTPS页面排版错乱播放器默认尺寸与主题不匹配在 shortcode 中添加widthxxx固定宽度点击播放无画面未向 SRS 推流或流名/应用名与地址不符确认 OBS 正在推流且推流地址的app/stream与播放 URL 一致FLV 无法在移动端播放部分 iOS Safari 不支持 MSE 播放 FLV改用 HLS 地址嵌入八、结语通过本教程你已经完成了 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考