HTTP Live Streaming，支持各种设备
[英]HTTP Live Streaming with support of wide range of devices
问题描述
我有一个网页，我需要从相机发出HTTP直播。
此外，我有两个相同视频内容的链接：
- HDS（f4m） - http：// [地址]：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：// [地址]：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
主要目标 - 支持各种浏览器（Chrome / Firefox / IE / Safari），操作系统（Win / iOS / Linux / Android）和设备（桌面/平板电脑/移动设备），即每个人都可以观看直播。
现在它适用于Flowplayer（使用f4m）。 但它使用Flash，因此移动设备和iOS无法播放视频流。
<!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>
我遇到了问题 ：我不知道如何解决支持各种设备的问题。
我不明白哪种方式：
- 在检测到操作系统和浏览器后，使用不同的视频播放器制作不同的页面并重定向。
- 使用javascript媒体播放器创建统一页面并自动选择流类型（或让用户选择所需的流）。
- 或者类似上述两种方法的组合。
谁遇到了这个问题？ 什么是解决这个问题的最佳方法？
2 个解决方案
解决方案1
1 2015-04-12 20:22:53
HLS可以在iOS和Safari 6+上本地播放，当然，在Android 4.x +上播放到不同程度（尽管最新版本似乎可靠，但您可能会遇到问题）以及在Safari 6+以外的桌面浏览器上使用Flash播放器。
最简单的方法是选择一个可以在不支持流直接的平台上在本机播放和后备方法之间切换的播放器。
对于Flowplayer ，可以使用Flash HLS模块与iPad插件一起使用。 它将在桌面上的Flash和iOS上的本机模式之间切换（可能还有Android，尚未尝试过）。
另一位值得一提的球员是JWPlayer 。 您可以查看其浏览器和设备参考页面。 它支持HTML5中的HLS或Flash后备。
如果您需要定位较旧的移动设备，那么您运气不佳，并且需要以合适的格式对实时流进行转码（例如：针对较旧Android设备的RTSP），并根据您已提及的用户代理重定向客户端。
要获得有关HLS的更多信息， 请访问http://www.encoding.com/http-live-streaming-hls/ 。
解决方案2
0 已采纳 2015-04-13 09:26:37
航空 ，谢谢！ 根据你的建议，我找到了最好的方法 - 我只使用m3u8链接（HLS）和带有后备闪存的javascript媒体播放器 - MediaElement.js 。
它在PC（Win / iOS / Linux），Android和iPad上运行良好。
在我的代码示例下面（隐藏了所有播放器控件）：
<!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>
在iOS中实现HTTP直播流
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.