WOWZA + RTMP + HTML5 Playback?

I have Wowza and testing RTMP streaming. Now as in Wowza RTMP Example, i can now:

Playback via Flash
- http://www.wowza.com/gettingstarted
- Server: rtmp://xx.xx.xx.xx:1935/live
- Stream: myStream
Playback via HTML5 for iOS
- <video x-webkit-airplay="allow" type="video/m3u8" src="http://xx.xx.xx.xx:1935/live/myStream/playlist.m3u8" />

So means, til now, i can playback via:

Flash (I DON'T WANT IT IN THE END)
iOS HTML5

So how to make it to play on:

HTML5 for non iOS Browsers?

For iOS on HTML5:

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

HTML5 for Android or Windows or Any other Browsers?

回答1:

The HTML 5 live streaming that you are using on iPhone is often referred to as "HLS". Currently most browsers on desktop do not support HLS via the HTML 5 video tag.

However, using Wowza, you can get your live stream onto basically any screen with a little effort.

iOS:

You're covered there. HLS live streaming from Wowza to iOS devices works like a charm.

Desktop:

Unfortunately, when it comes to desktop browsers you are still limited to using flash for live streams. You can do so in one of two ways:

With a typical flash media player, such as JWPlayer using the tried and true RTMP method, as you described.
Using a flash media player that supports HLS streams (such as JWPlayer). In this case, you would use the same endpoint that you're using for iOS streams. I've been running live streams this way in flash on desktop. For my money, I prefer to use HLS for desktop, as I am only dealing with one protocol for live streams on all devices at the end of the day. I have also found the performance to be quite good.

You can read about HLS support in JWPlayer here:

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

Do note that HLS support in JWPlayer is limited to their enterprise edition.

All that said, I would really recommend checking out JWPlayer. In my opinion, nothing makes it easier to get your live streams running on all devices.

Android:

Although Android does not technically support HLS, I have found that on a number of Android devices, including Galaxy S4, and HTC One, using an HLS stream in a video tag works just like on iOS. Since everything I've read indicates that HLS is not supported on Android, I can only assume that this functionality is added by the individual manufacturers. Alternatively, you present Android users with a link to the rtsp stream that is generated by Wowza in it's default application configuration. On most other Android devices, the rtsp stream can be opened with the device's native media player. A full history and workarounds regarding live streaming on Android can be found here:

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

I'll wrap up by saying that although live streaming to mulitple devices has gotten much easier even in the last year, there is still a butt load fragmentation that can make a developer looking to implement a solution pull his hair out. Furthermore, although most would agree that the HTML 5 video specification is the future, that spec is still widely debated, and not really "done" yet. Jeroen Wijering keeps a running article on the subject that is updated regularly and is, in my opinion, required reading for anyone dealing with video in web applications. I would read it thoroughly, and check back frequently for updates as you continue to develop video solutions for the web:

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

Update:

JWPlayer now officially supports HLS on Android 4.1+ (Jellybean):

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

回答2:

Flowplayer can provide a solution for that. Android & iOS browsers can play HLS stream. There is a simple script as below. Check it out

    <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