HTTP Live Streaming with support of wide range of devices
Question
I have a web page where I need to place an HTTP live streaming from the camera.
Also I have two links with same video content:
- HDS (f4m) - http://[address]:80/test/manifest.f4m
<manifest xmlns="http://ns.adobe.com/f4m/1.0"> <id>flussonic_media</id> <streamType>live</streamType> <bootstrapInfo profile="named" id="bootstrap1" url="bootstrap"/> <media streamId="stream1" url="hds/tracks-1/" bitrate="70" bootstrapInfoId="bootstrap1"> <metadata> AgAKb25NZXRhRGF0YQMABmhlaWdodABAdgAAAAAAAAAMdmlkZW9jb2RlY2lkAEAcAAAAAAAAAA12aWRlb2RhdGFyYXRlAEBRgAAAAAAAAAV3aWR0aABAhAAAAAAAAAAACQ== </metadata> </media> </manifest>
- HLS (m3u8) - http://[address]:80/test/index.m3u8
#EXTM3U #EXT-X-ALLOW-CACHE:NO #EXT-X-TARGETDURATION:7 #EXT-X-VERSION:3 #EXT-X-MEDIA-SEQUENCE:13403 #EXT-X-PROGRAM-DATE-TIME:2015-04-11T11:21:19 #EXT-X-BYTE-SIZE:77268 #EXTINF:6.008, 2015/04/11/11/21/19-06008.ts #EXT-X-PROGRAM-DATE-TIME:2015-04-11T11:21:25 #EXT-X-BYTE-SIZE:78396 #EXTINF:6.007, 2015/04/11/11/21/25-06007.ts #EXT-X-PROGRAM-DATE-TIME:2015-04-11T11:21:31 #EXT-X-BYTE-SIZE:79712 #EXTINF:6.007, 2015/04/11/11/21/31-06007.ts #EXT-X-PROGRAM-DATE-TIME:2015-04-11T11:21:37 #EXT-X-BYTE-SIZE:75952 #EXTINF:6.007, 2015/04/11/11/21/37-06007.ts
The main aim - support for a wide range of browsers (Chrome/Firefox/IE/Safari), OS (Win/iOS/Linux/Android) and devices (desktop/tablet/mobile), ie everyone can watch live stream.
Now it works with Flowplayer (with f4m). But it uses Flash, therefore mobile devices and iOS can't play video stream.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Streaming</title> <link rel="stylesheet" href="flowplayer/skin/minimalist.css"> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="flowplayer/flowplayer.min.js"></script> <script src="flowplayer/flowplayer-api.js"></script> </head> <body style="background:#424242;"> <div id="webtv"></div> <script> jQuery(document).ready(function () { $f("webtv", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", { plugins: { flashls: { url: "flowplayer/flashlsFlowPlayer.swf" } }, clip: { url: "http://[address]:80/test/index.m3u8", provider: "flashls", urlResolvers: "flashls", scaling: "fit" } }); }); </script> </body> </html>
I faced with problem : I don't know how to solve the problem of supporting a wide range of devices.
I don't understand which way do it:
- Make different pages with different video players and redirect on them after detecting OS and browser.
- Create unified page with javascript media player and auto-select stream type (or give user to choose needed stream).
- Or something like combination of two above methods.
Who faced with that problem? What the best way to solve this problem?
2 answers
solution1
1 2015-04-12 20:22:53
HLS can be played natively on iOS and Safari 6+ of course, on Android 4.x+ to a varying degree (you may encounter issues although the latest versions seem reliable) and trough a Flash player on desktop browsers other than Safari 6+.
The easiest way is to pick a player that can switch between native play and a fallback method on platforms that don't support the stream directly.
For Flowplayer there's Flash HLS module that can be used alongside the iPad plugin to this end. It will switch between Flash on desktop and native mode on iOS (and probably Android, haven't tried it yet).
Another player worth mentioning is JWPlayer . You can check its Browser and Device reference page. It supports HLS in HTML5 or with Flash fallback.
If you need to target older mobile devices you're out of luck and you need to transcode the live stream in a suitable format (eg: RTSP for older Android devices) and redirect the clients based on the user-agent like you already mentioned.
To get more info on HLS head to http://www.encoding.com/http-live-streaming-hls/ .
solution2
0 ACCPTED 2015-04-13 09:26:37
aergistal , thank you! With your advice I found the best way to do it - I use only m3u8 link (HLS) and javascript media player with fallback to flash - MediaElement.js .
It's works perfect on PC (Win/iOS/Linux), Android and iPad.
Below my code example (all player controls are hided):
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>title</title> <script src="me/jquery.js"></script> <script src="me/mediaelement.min.js"></script> <script src="me/mediaelement-and-player.min.js"></script> <script src="me/hls_streams.js"></script> <link rel="stylesheet" href="me/mediaelementplayer.min.css" /> <link rel="stylesheet" href="me/mejs-skins.css" /> <style> .mejs-container .mejs-controls { display: none !important; } </style> </head> <body> <div> <video width="640" height="360" id="player" poster="me/play.png"> <source type="application/x-mpegURL" src="http://[address]/index.m3u8" /> </video> </div> <script type="text/javascript"> $( document ).ready(function() { $('video').mediaelementplayer({ features: [], success: function(media, node, player) { if (media.pluginType == 'flash') { media.addEventListener('canplay', function() { media.play(); }, false); } else { media.play(); } } }); }); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.