如何使用videojs播放rtmp直播流？
Posted
技术标签:
【中文标题】如何使用videojs播放rtmp直播流？【英文标题】：How to play rtmp live stream using videojs？ 【发布时间】：2017-09-02 10:17:42 【问题描述】：我正在使用 OBS 将直播流推送到我的本地 rtmp 服务器（node-rtsp-rtmp-server）， 它适用于 VLC 媒体播放器。 我只是想把它放到一个网页中，我找到了videojs。 它不起作用并返回不支持指定的“类型”属性“rtmp/mp4”。 看来我的 rtmp 服务器没有收到来自该网页的任何请求。 那么我错过了什么？ 这是我的代码：
<head>
<meta charset="utf-8">
<link href="./video-js-6.0.0/video-js.css" rel="stylesheet">
<script src="./video-js-6.0.0/video.js"></script>
<script src="./video-js-6.0.0/videojs-flash.min.js"></script>
<script>
videojs.options.flash.swf = "./video-js-6.0.0/video-js.swf"
</script>
</head>
<body>
<video id='vid' class='video-js' controls height=300 width=600>
<source src="rtmp://127.0.0.1:1935/live/pokemon" type="rtmp/mp4"/>
</video>
<script>
var player = videojs('vid');
</script>
</body>
【问题讨论】：
我遇到了同样的问题。显然videojs从6.0版本开始就没有flash播放器了，这意味着它不能播放RTMP（因为没有socket就没有办法打开RTMP，没有插件就没有socket） 【参考方案1】：要将流从 RTMP 服务器发布到网页，您有两种选择：
-
在 Flash 播放器（Strobe、JwPlayer、FlowPlayer）中嵌入 RTMP 流
使用支持类似 Wowza 流引擎的流服务器以 html5 格式（HLS 或 MPEG DASH）传送流；如果您的流尚未使用 H264 和 AAC 编码，这也可能需要转码
【讨论】：
一个新选项在 HTML5 浏览器（包括移动）中不可用：WebRTC。在videonow.live 上实时试用或部署broadcastlivevideo.com 解决方案（免费下载）。 RTMP 到 WebRTC 涉及一些转码，至少对于音频（WebRTC 需要 Opus）和 Wowza SE 来处理多种流类型。【参考方案2】：<html>
<head>
<title> Stream Player </title>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>videojs.options.flash.swf = "video-js.swf";</script>
</head>
<body>
<center>
<video
id="livestream"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
autoplay
preload="auto"
data-setup='"techorder" : ["flash","html5] '>
<source src="rtmp://127.0.0.1:1935/live/test" type="rtmp/mp4">
</video>
</center>
</body>
</html>
data-setup techorder 参数似乎是 videojs 使用 flash 所必需的。
如果这不起作用，请确保您的 javascript 文件都正常。从 video.js 的第 6 版开始，它默认不再支持 flash。 https://docs.videojs.com/tutorial-faq.html#q-how-can-i-play-rtmp-video-in-videojs
我正在为我的服务器使用 nginx。
https://obsproject.com/forum/resources/how-to-set-up-your-own-private-rtmp-server-using-nginx.50/
https://github.com/arut/nginx-rtmp-module
如果您更愿意为 video.js 和 video-js.css 文件使用 CDN，请将头部替换为
<!--The latest versions of video.js no longer support flash or rtmp-->
<link href="https://vjs.zencdn.net/5.19/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/5.19/video.js"></script>
注意：你最好花时间学习 HLS 或 DASH，而不是 Flash
【讨论】：
但是ios Safari浏览器没有Flash，怎么在iOS设备上播放rtmp？【参考方案3】：浏览器不支持 RTMP。在浏览器中连接到 RTMP 流的唯一方法是使用 Flash。
考虑使用更兼容的分发协议，例如媒体源扩展支持的 DASH。
【讨论】：
@Finesse 请注意答案中提到 MediaSource 扩展的部分。 caniuse.com/#feat=mediasourcedashif.org/dash.js【参考方案4】：如果在使用 vlc 媒体播放器时可以正常工作，则表示您的 rtmp 服务器正常。 您必须检查浏览器是否支持闪存。因为我们意识到最新版本的 chrome 和 Firefox 默认会自动阻止 flash。我们能够通过简单地允许网站上的 Flash 来解决这个问题。 video.js 和 videojs-flash 没有任何问题。请参考随附的屏幕截图。
【讨论】：
虽然这个答案实际上并不能帮助网站所有者（因为用户不应该知道他们应该向您的网站授予特殊权限 - 并且要求这样的特殊权限是skeevy） ，这是一个有点帮助的答案，因为这里面临的问题的根源是现代浏览器根本不信任 Flash 内容（有充分的理由）。 不仅如此，我还注意到，即使在 Chrome 上启用 Flash 也无法使其真正起作用。 Chrome 实际上就像没有安装 flash 插件一样（我安装了两次并使用 chrome://components 验证了安装）。更糟糕的是，启用 Flash 只会添加一条关于 2020 年之后不再支持它的烦人消息，这无关紧要，因为任何需要 Flash 的东西都会不断请求安装插件。只有 Firefox 似乎可以正确运行 flash。以上是关于如何使用videojs播放rtmp直播流？的主要内容，如果未能解决你的问题，请参考以下文章
搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmphls直播流及普通视频)