WOWZA + RTMP + HTML5 播放?

Posted

技术标签:

【中文标题】WOWZA + RTMP + HTML5 播放?【英文标题】:WOWZA + RTMP + HTML5 Playback? 【发布时间】:2013-07-28 04:32:11 【问题描述】:

我有 Wowza 并正在测试 RTMP 流。现在就像在 Wowza RTMP 示例中一样,我现在可以:

通过 Flash 播放 http://www.wowza.com/gettingstarted 服务器:rtmp://xx.xx.xx.xx:1935/live 流:myStream 通过 html5 播放 ios <video x-webkit-airplay="allow" type="video/m3u8" src="http://xx.xx.xx.xx:1935/live/myStream/playlist.m3u8" />

也就是说,到目前为止,我可以通过以下方式播放:

Flash (最后我不想要它) iOS HTML5

那么如何让它发挥作用:

适用于非 iOS 浏览器的 HTML5?

对于 HTML5 上的 iOS:

<video x-webkit-airplay="allow" type="video/m3u8" src="http://xx.xx.xx.xx:1935/live/myStream/playlist.m3u8" />

适用于 Android 或 Windows 或任何其他浏览器的 HTML5?

【问题讨论】:

【参考方案1】:

您在 iPhone 上使用的 HTML 5 实时流媒体通常称为“HLS”。目前大多数桌面浏览器不支持通过 HTML 5 视频标签的 HLS。

但是,使用 Wowza,您可以轻松地将直播流传输到基本上任何屏幕上。

iOS:

你在那里。从 Wowza 到 iOS 设备的 HLS 直播就像一个魅力。

桌面:

很遗憾,对于桌面浏览器,您仍然只能使用 Flash 进行直播。您可以通过以下两种方式之一执行此操作:

    使用典型的 Flash 媒体播放器,例如 JWPlayer,使用久经考验的 RTMP 方法,如您所述。

    使用支持 HLS 流的 Flash 媒体播放器(例如 JWPlayer)。在这种情况下,您将使用与 iOS 流相同的端点。我一直在桌面上以这种方式在 Flash 中运行实时流。为了我的钱,我更喜欢将 HLS 用于桌面,因为我只在一天结束时处理所有设备上的实时流的一种协议。我也发现性能相当不错。

您可以在此处阅读 JWPlayer 中的 HLS 支持:

http://support.jwplayer.com/customer/portal/articles/1430189-about-hls-streaming

请注意,JWPlayer 中的 HLS 支持仅限于其企业版。

说了这么多,我真的建议您查看JWPlayer。在我看来,没有什么比让您的直播在所有设备上运行更容易了。

安卓:

虽然 android 在技术上不支持 HLS,但我发现在包括 Galaxy S4 和 HTC One 在内的许多 Android 设备上,在视频标签中使用 HLS 流就像在 iOS 上一样。由于我阅读的所有内容都表明 Android 不支持 HLS,因此我只能假设此功能是由各个制造商添加的。或者,您可以向 Android 用户提供指向由 Wowza 在其默认应用程序配置中生成的 rtsp 流的链接。在大多数其他 Android 设备上,可以使用设备的本机媒体播放器打开 rtsp 流。可以在此处找到有关在 Android 上进行直播的完整历史记录和解决方法:

http://www.jwplayer.com/blog/the-pain-of-live-streaming-on-android/

最后我要说的是,尽管即使在去年,向多个设备进行实时流式传输变得更加容易,但仍然存在对接负载碎片,这可能会使希望实施解决方案的开发人员大吃一惊。此外,尽管大多数人都同意 HTML 5 视频规范是未来,但该规范仍在广泛争论中,还没有真正“完成”。 Jeroen Wijering 有一篇关于该主题的运行文章,该文章会定期更新,在我看来,任何在 Web 应用程序中处理视频的人都需要阅读该文章。我会仔细阅读它,并在您继续开发网络视频解决方案时经常回来查看更新:

http://www.jwplayer.com/html5/

更新:

JWPlayer 现在在 Android 4.1+ (Jellybean) 上正式支持 HLS:

http://support.jwplayer.com/customer/portal/articles/1430189-about-hls-streaming

【讨论】:

【参考方案2】:

Flowplayer 可以为此提供解决方案。 Android & iOS 浏览器可以播放 HLS 流。有一个简单的脚本如下。看看吧

    <html>
    <head>
    <title>My Flowplayer video</title>
    <link rel="stylesheet" 
      href="https://releases.flowplayer.org/7.2.7/skin/skin.css">
    <!-- hls.js -->
    <script 

 src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.10.1/hls.light.min.js"></script>
<!-- flowplayer -->
  <script src="https://releases.flowplayer.org/7.2.7/flowplayer.min.js"> </script>

    </head>
    <body>
    <div class=”flowplayer” data-rtmp=”rtmp://127.0.0.1/vod”>
    <video>
    <source type=”video/flash” src=”mp4:vod_test”>
    <source type=”application/x-mpegurl” src=”streams/vod_test.m3u8″>
    </video>
    </div>
    </body>
    </html>

How to Play Live and Vod Stream on all Browsers

【讨论】:

以上是关于WOWZA + RTMP + HTML5 播放?的主要内容,如果未能解决你的问题,请参考以下文章

video.js播放rtmp

从 Wowza 到 iOS 的 RTMP 直播

直播 RTMP/RTSP 播放器,无需在 Android 上使用 webview(WOWZA 服务器)

如何使用Wowza的HTML5播放器Wowza Player

如何指定跨域策略文件以允许 Flash 从 RTMP (Wowza) 视频流中获取位图?

通过 RTP 流式传输,RTMP 播放质量问题