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.