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?
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
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
Related
First, I've looked at this question, but it's a few years old and support for these things might have changed.
I'm developing an HTML5 app for Android using an IDE (HTML5 Builder) that allows to export the HTML5 app to an Android APK. I'm doing that and everything works fine except the video and audio files.
In that app I have one video in mp4 format, and a few audios in mp3 format. When I run that app as a web-app in the internet browser of a desktop and in an Android device the video and the audios work perfectly. However, when I export that app as an APK and install it in an Android device, everything works fine (navigation, css, images, etc) except the video and the audios.
Is it a problem of the format? I've been doing some research and it seems that mp4 and mp3 should be accepted... Besides, I've followed this method to encode the video as explained in this article (which is the same method explained in the question I mention above) but still the video doesn't work.
Any help with this would be appreciated!
First I will state that with me I've experienced a hit or miss with mobile devices. Some mobile devices will work fine with my code other times they wont work at all when using audio or video. I know the following works with iPhone, and supports my primary android device but not all android devices.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogv" type="video/ogg">
<source src="movie.webm" type="video/webm">
</video>
I recomend making the same video files for all 3 formats, this way if a device doesn't support one format but supports another you'll be in luck. The same is for audio but you use the audio tags.
I would recomend installing the following Android Apps on your device to see if your device supports all of the HTML5 features. https://play.google.com/store/apps/details?id=com.mds.phonegapapijqm and https://play.google.com/store/apps/details?id=com.phonegap.phonegapdeveloper
I know you said you weren't using phonegap but still those apps are very handy for testing HTML apps for android in general.
I'm Making a Mobile website using jquery mobile and I'm only considering iPad, iPhone and Android device. I don't need Flash Fallback.
Then what is the best method to make video player only for mobile? Do i have to use any of these http://praegnanz.de/html5video/ or only html 5 video code will do. I don't need custom skin. Main thing is video should be smoothly played on iPad, iphone and Android.
You don't necessarily have to use one of those video libraries; you can use the HTML5 video element which allows you to style the controls via CSS and specify fallbacks (including flash and silverlight).
The main thing to consider will be what video codecs each mobile browser on iphone, ipad and android supports.
In between the tags, you can specify multiple video formats to fallback on.
I tested this on iphone and ipad and it could play the video using the HTML5 video element:
<video width="320" height="240" controls="controls">
<source src="http://blip.tv/file/get/Qtv-CarrieFisherTalksStarWarsOnQ553.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
iOS will support mp4 but i'm not an Android expert so i found this post that details encoding video that will play on Android via the html5 video element: Encoding Video For Android
I'm in the stage of planning a new application for both iOS and Android platforms (tablet and phone), which will heavily feature streaming video playback.
However, the documentation is not entirely clear about capabilities of these platforms when it comes to video playback. So my questions are:
1.) Can Android and iOS playback HTML5 video from a webpage/webview?
2.) Can HTML5 videos be shown as part of a webpage (non-fullscreen) with an overlay?
3.) Can Android and iOS play videos natively in non-fullscreen mode?
4.) Can I do text/graphcs overlay over a played video if it's a part of native app?
The answers on these questions (if possible, with supported OS versions) would be much appreciated, I can't seem to find conclusive resouces as part of the platform documentation.
Ok let me try to answer as clear as possible since I just had experience with apps for streaming in ios and android.
1.) Can Android and iOS playback HTML5 video from a webpage/webview?
Yes The both can with the <Video> tag
2.) Can HTML5 videos be shown as part of a webpage (non-fullscreen) with an overlay?
This depends more on the device than on the OS. iPad can do it without full-screen but iPhone does apply full-screen, Android Tablets Can some Andorid phones Can't.
Specifically on iOS and iPhones the best way to go would be to create a MPMoviePlayerController (not to be confused with MPMoviewPlayerViewController) and you can set the layout in your viewController and restrict the size of the video so you can see the layout. (This allso works of course in iPad so that could be your best approach for both)
3.) Can Android and iOS play videos natively in non-fullscreen mode?
Yes they can, as explained above would be better if instead of using a WebView you use VideoPlayer's in View Controllers
4.) Can I do text/graphcs overlay over a played video if it's a part of native app?
You can using the above approach since your video will be on your viewcontroller where you manage the size and position of the player in your view, when doing it on a webviewthe device automatically loads the player so you are unable to manage it.
You should play safe and go for min OS requirements iOS 4.0 and Android OS 2.1 because of the improvements both versions made on native video playback
I don't think there can be a definitive answer without testing and even then the answers are likely to change (rapidly, I hope). I looked at the reference video here: http://broken-links.com/tests/video/ which is encoded in three different forms, ensuring it can play correctly in Firefox, which supports ogg, Chrome, which supports webm, and whatever supports m4v.
<video id="video" autobuffer height="240" poster="../images/bbb_poster-360x240.jpg" width="360">
<source src="../media/BigBuck.m4v">
<source src="../media/BigBuck.webm" type="video/webm">
<source src="../media/BigBuck.theora.ogv" type="video/ogg">
</video>
I tested this on an iPad 2 with the latest updates, a Samsung Galaxy Tab with Android 3.1, and a Nexus One with Android 2.3 as well as Firefox 5 and Chrome 12 on OS X 10.6.8. Both Firefox and Chrome played perfectly.
Ipad 2: Played correctly in the browser (non-fullscreen). The only anomaly: time was shown as "1' of NaN'"
Android 3.1: Played correctly in the browser (non-fullscreen.)
Android 2.3: Went to full-screen when I pressed "play." After playing, went back to in-browser, but showed time as "1' of 6000'" Also, it hung for a while before playing, perhaps because of the connection speed, but it didn't feel completely stable.
I hope this is helpful.
can anybody tell me the best HTML5 embedding code and video-codec (+file format) for streaming video-content over the internet (HTTP-Streaming)??
The videos should be watched without problems on iOS (iPhone + iPad) and Android phones!
thanks!
Mike
http://diveintohtml5.info/video.html
that page goes into detail about using html5 video and appropriate codecs for different browsers, including iOS and android.
Until DASH becomes widely supported, streaming video into HTML5 on mobile devices is extremely limited.
The only option at this moment is to use Apple's HLS, which works wonderfully on iPhone/iPad/iPod, but doesn't work in Android. https://developer.apple.com/streaming/
Google's WebM is being worked on, and there's some stuff here: https://sites.google.com/a/webmproject.org/wiki/adaptive-streaming/instructions-to-playback-a-webm-dash-presentation , but I haven't tried it on Android.
Can Flash Media Server 3.5 serve a video rtsp stream to the Android media player?
Or do we need to use Wowza or red5 to serve an rtsp stream to the Android media player rtsp client?
Are there any other rtsp servers to consider when the video needs to be viewed on Android (without the Adobe Flash app)?
Try darwin streaming server. This can stream MPEG-4 and 3GPP.
Note that Videoplayer in Android supports RTSP streaming as per 3GPP PSS Streaming specifications. i.e fileformat is 3GP/MP4 and the supported codecs are MPEG-4 Video, AVC, MPEG4 Audio, AMR, and H263.
One potential drawback with darwin is you need 3rd party tools to do hinting first.There are several free hinting tools. Definitely worth a try.
DarwinStreaming Server Link
FMS 3.5 does not support rtsp streaming.
I could manage to play a RTSP stream in Android 2.3 with HTML5 on default browser, no external app, no flash plugin.
<audio autoplay="autoplay" controls="controls" autobuffer="autobuffer" loop="loop">
<source src="rtsp://74.115.208.37:1935/live/luxweradio2_8403.stream" type="audio/mpeg" />
</audio>
I explain each part:
-I'm using the default Android browser (also worked in Dolphin)
-The loop="loop" part made the stream actually play continuously, without that I heard like 0.1 seconds of audio each time I clicked play. Is this a hack or what?
-The autoplay="autoplay" part works, it actually auto-plays after some seconds (no feedback like "loading..." though)
-The type="audio/mpeg" for me it seems like Android browser ignores that, I've tried others like video/3GPP (yes, video) and still worked!
-I'm not sure if autobuffer="autobuffer" actually does anythinhg 'cause it isn't part of the HTML5 audio tag definition, but I've seen so many "bad" things that work... I should test some cases with and without, but it's pretty late now here in Argentina :P
WOWZA 3 is able to serve the same stream in RTMP, HTTP and RTSP. I have it running it. It is publish as RTMP and delivered as RTMP, HTTP and RTSP at the same time.
See this:
http://www.wowza.com/forums/content.php?36#publish
Hope it helps.
My Media Server / library supports streaming to Android or any other compatible RtspClient.
http://net7mma.codeplex.com/
Check out the article on CodeProject # http://www.codeproject.com/Articles/507218/Managed-Media-Aggregation-using-Rtsp-and-Rtp
If you need anything else let me know!