RTMP流播放答案

【问题标题】：RTMP streaming playRTMP流播放
【发布时间】：2023-04-02 05:24:01
【问题描述】：

我正在尝试让 rtmp 流媒体工作。我有几乎相同的代码建议here

<html>
  <head>
    <script src="me/build/jquery.js"></script>
    <script src="me/build/mediaelement-and-player.js"></script>
    <link rel="stylesheet" href="me/build/mediaelementplayer.min.css" /></code>
  </head>
  <body>

<video>
     <source src="000109f6004b00a6004af03676235daa" type="video/rtmp">
</video>
<script>
$('video').mediaelementplayer({flashStreamer:"rtmp://thinkbuntu:1935/flvplayback/000109f6004b00a6004af03676235daa"});
</script>

  </body>
</html>

而 rtmp://thinkbuntu:1935/flvplayback 是本地 rtmpserver 的 URL，而 '000109f6004b00a6004af03676235daa' 是 mp4 视频。我知道本地服务器正在工作，因为我可以通过 rtmpdump 转储它，并且使用 jwplayer 我可以正常播放视频。使用 flv、webm、ogv 的中介也不起作用。

我在 Firefox 中收到此错误（在 Chrome 中完全没有错误）：

Specified "type" attribute of "video/rtmp" is not supported. Load of media resource 000109f6004b00a6004af03676235daa failed.

通过 json 属性配置它以同样的方式失败。

我也尝试过这种方法Replacing media source (http with rtmp) in MediaElementsJS based on browser capabilities，但它也失败了。

我做错了吗？

【问题讨论】：

标签： video-streaming mediaelement.js rtmp

【解决方案1】：

我的设置几乎相同，而且我的工作正常。不确定是否需要任何属性，但我在视频标签上有一些。

（仅供参考，我猜额外的 </code> 标签只是从您粘贴到 SO 中的？）

    <video width="300" height="240" controls="controls" preload="none" id="stream">
         <source src="7901e75800f700d700437a45351f0214" type="video/rtmp">
    </video>

    <script type="text/javascript">
        $('#stream').mediaelementplayer({
            flashStreamer: "rtmp://170.93.143.150/rtplive/000109f6004b00a6004af03676235daa",
            plugins: ['flash', 'silverlight'],
            alwaysShowControls: false,
            success: function (mediaElement, domObject) {
                if (mediaElement.pluginType == 'flash') {
                    mediaElement.play();
                }
            },
        });
     </script>

【讨论】：

这个流键是“000109f6004b00a6004af03676235daa”吗？如果是，那么“7901e75800f700d700437a45351f0214”是什么？

【解决方案2】：

在您的情况下，您必须在视频标签内添加前缀“mp4：”

<video width="360" height="203" id="player1" src="mp4:sample" type="video/rtmp" controls="controls"></video>

<script>$('video').mediaelementplayer({flashStreamer:"rtmp://localhost/vod"});</script>

【讨论】：

【解决方案3】：

我们必须移植嗅探 RTMP 流量以确定浏览器正在协商的确切内容，因为 RTMP URL 是唯一解释的：部分 URL 标识流服务端点，其余部分标识流资源，介于两者之间的是后跟冒号的文件格式。如果您不知道 RTMP 服务器的配置，则无法确定服务端点在 URL 中的何处结束以及流开始的位置。由于我们不知道服务器配置，这给我们带来了无穷无尽的挫败感。

在源标签中，我们将完整的 RTMP URL 作为“src”属性（协议、服务端点、流和文件格式 - 一切，整个 shebang），在 flashStreamer 属性中我们标识了服务端-point only（所有内容，但不包括文件格式）。经过大量实验，这是唯一成功的属性组合。

【讨论】：

【解决方案4】：

确保您的 Firefox 已安装 Flash。查看 Firefox 插件中是否有 Shockwave flash。如果没有，

打开flash官网
选择需要 Flash Player 用于其他计算机吗？
选择合适的版本
下载安装并重启FF
确保Shockwave Flash已激活

【讨论】：