WordPress是非常方便做网站、博客、vlog等等，SRS支持WordPress插件后，就可以非常方便做直播和WebRTC，增强了WordPress的音视频能力，也顺手支持了Typecho插件。

介绍

如果你已经有了一台 SRS云服务器[1] ，推流后可以用播放器播放直播流， 可以用H5或VLC[2] 播放。
但是如果你想在WordPress网站的文章中，播放HLS、HTTP-FLV或WebRTC直播流，要怎么搞？
在这个文章中，我会给出如何使用WordPress的SrsPlayer插件，来直接播放直播流，做一个直播网站，观众可以观看。

前提条件

操作的前提条件是：
  1. 1. 安装下OBS，请在 这里[3] 下载和安装OBS。
  2. 2. 安装和设置完 SRS云服务器[4] 。
  3. 3. 安装和设置好WordPress，可以用WordPress写文章了，这个麻烦网上搜一搜。很多介绍了。
这个文章中，我们会用your_public_ipv4和your_domain_name，代表你的SRS服务器的IP和域名，请替换成你的地址。

Step 1: 下载插件

打开WordPress的后台，点击Plugins > Add New按钮。
搜索插件
SRS Player
，或者直接打开页面 
链接[5]
 安装插件。

点击Install Now按钮，安装完成后，点击Activate按钮激活插件。

Step 2: 嵌入简码

从SRS的后台，直接拷贝WordPress的简码Shortcode，如下图所示：
在WordPress中，创建一个Post或Page。
在Post或Page中，新建一个简码Shortcode，如下图所示。
在搜索框中，输入shortcode，也就是简码，如下图所示。
或者直接在输入框中敲斜杠/，然后按回车键，也可以直接插入，如下图所示。
在Shortcode中，粘贴已经复制的流地址。比如：
  1. 1. HLS [srs_player url="https://your_public_ipv4/live/livestream.m3u8"]
  2. 2. FLV [srs_player url="https://your_public_ipv4/live/livestream.flv"]
  3. 3. WebRTC [srs_player url="webrtc://your_public_ipv4/live/livestream"]
点击Publish按钮，然后访问你的页面。
你的播放器应该在页面上正常播放了。
Note: SRS不需要HTTPS，但是如果你的WordPress网站是HTTPS的，那么就无法播放非HTTPS的流。这时候就必须设置SRS的HTTPS，请参考 如何设置HTTPS[6]。
Step 3: 设置宽度
播放器默认的大小是视频流的大小，自动检测的，一般可以不用调整。如果你希望设置也可以，可以加一个属性width="your chosen width"就可以。
例如，如果你希望设置为320，那么代码如下：
[srs_player url="https://ip/live/livestream.m3u8" width="320"]
你的播放器的宽会变成320，而高是自动等比调整的。

Step 4: 设置HTTPS

如果你的WordPress网站是HTTPS的，但是SRS是HTTP，会播放失败。因为HTTPS网站不能访问HTTP资源，这是浏览器安全要求。
请参考如何设置HTTPS[7]，让SRS支持HTTPS的流。

总结

在这个文章中，我们设置了WordPress插件，并且在Post或Page中，实现了直播播放。如果对于SRS有问题，那么可以参考 Wiki[8] 。也欢迎加微信群 这里[9] 。

引用链接

[1]
 SRS云服务器: 
https://www.bilibili.com/video/BV1844y1L7dL/
[2]
 VLC: 
https://www.videolan.org/
[3]
 这里: 
https://obsproject.com/
[4]
 SRS云服务器: 
https://www.bilibili.com/video/BV1844y1L7dL/
[5]
 链接: 
https://wordpress.org/plugins/srs-player/
[6]
 如何设置HTTPS: 
http://ossrs.io/lts/zh-cn/blog/SRS-Cloud-HTTPS
[7]
 如何设置HTTPS: 
http://ossrs.io/lts/zh-cn/blog/SRS-Cloud-HTTPS
[8]
 Wiki: 
https://github.com/ossrs/srs/wiki/v4_CN_Home
[9]
 这里: 
https://github.com/ossrs/srs/wikis/Contact#wechat
继续阅读
阅读原文