支持各种设备的 HTTP 实时流式传输答案

【问题标题】：HTTP Live Streaming with support of wide range of devices支持各种设备的 HTTP 实时流式传输
【发布时间】：2015-04-17 04:17:15
【问题描述】：

我有一个网页，我需要在其中放置来自摄像机的 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）、操作系统（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 媒体播放器和自动选择创建统一页面流类型（或让用户选择需要的流）。
或者类似上述两种方法的组合。

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

【问题讨论】：

标签： html http streaming

【解决方案1】：

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

最简单的方法是在不直接支持流的平台上选择可以在原生播放和后备方法之间切换的播放器。

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

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

如果您需要针对较旧的移动设备，您就很不走运了，您需要以合适的格式对直播流进行转码（例如：适用于较旧 Android 设备的 RTSP）并像您一样根据用户代理重定向客户端已经提到了。

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

【讨论】：

【解决方案2】：

aergistal，谢谢！根据您的建议，我找到了最好的方法 - 我只使用 m3u8 链接 (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>

【讨论】：