支持多种设备的 HTTP 实时流式传输

Question

我有一个网页，我需要在其中放置来自相机的 HTTP 直播。

我还有两个视频内容相同的链接：

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

主要目标 - 支持广泛的浏览器 (Chrome/Firefox/IE/Safari)、OS (Win/iOS/Linux/Android) 和设备 (desktop/tablet/mobile), 即人人都可以看直播

现在它可以与 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>

我遇到问题：我不知道如何解决支持广泛设备的问题。

我不明白该怎么做:

使用不同的视频播放器制作不同的页面并重定向到他们在检测到 OS 和浏览器后。
使用 javascript 媒体播放器和自动 select 创建统一页面流类型（或让用户选择所需的流）。
或以上两种方法的组合。

谁遇到过这个问题？解决此问题的最佳方法是什么？

Answer 1

HLS 可以在 iOS 和 Safari 6+ 上原生播放，当然，在 Android 4.x+ 上也可以在不同程度上播放（尽管最新版本看起来可靠，但您可能会遇到问题）并在 Safari 6+ 以外的桌面浏览器上使用 Flash 播放器。

最简单的方法是选择一个可以在不直接支持流的平台上在本机播放和回退方法之间切换的播放器。

对于 Flowplayer，有 Flash HLS module 可以与 iPad 插件一起使用。它会在桌面上的 Flash 和 iOS 上的本机模式之间切换（可能 Android，还没有尝试过）。

另一个值得一提的播放器是JWPlayer。您可以查看其 Browser and Device reference 页面。它在 HTML5 或 Flash 后备中支持 HLS。

如果您需要定位较旧的移动设备，那您就不走运了，您需要将直播流转码为合适的格式（例如：用于较旧 Android 设备的 RTSP）并根据以下内容重定向客户端就像您已经提到的用户代理。

要获取有关 HLS 的更多信息，请访问 http://www.encoding.com/http-live-streaming-hls/。

Answer 2

aergistal，谢谢！根据您的建议，我找到了最好的方法 - 我只使用 m3u8 link (HLS) 和 javascript 媒体播放器回退到 flash - 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>

支持多种设备的 HTTP 实时流式传输

HTTP Live Streaming with support of wide range of devices

html

streaming

http