Question

我有一个网页，我需要从相机中放置HTTP直播。

此外，我有两个相同视频内容的链接：

HDS（f4m） - http://[address]:80/test/manifest.f4m

＆＃13;

<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>

＆＃13;

HLS（m3u8） - http://[address]:80/test/index.m3u8

＆＃13;

#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

＆＃13;

主要目标 - 支持各种浏览器（Chrome / Firefox / IE / Safari），操作系统（Win / iOS / Linux / Android）和设备（桌面/平板电脑/手机），即每个人都可以观看直播。

现在它适用于Flowplayer（使用f4m）。但它使用Flash，因此移动设备和iOS无法播放视频流。

＆＃13;

<!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>

＆＃13;

我遇到了问题：我不知道如何解决支持各种设备的问题。

我不明白采用哪种方式：

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

谁面对这个问题？什么是解决这个问题的最佳方法？

Answer 1

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

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

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

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

如果您需要定位较旧的移动设备，则运气不佳，您需要以合适的格式对实时流进行转码（例如：针对较旧Android设备的RTSP），并根据用户代理重定向客户端就像你已经提到的那样。

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

Answer 2

airgistal ，谢谢！根据您的建议，我找到了最好的方法 - 我只使用m3u8链接（HLS）和javascript媒体播放器以及后备闪存 - MediaElement.js。

它在PC（Win / iOS / Linux），Android和iPad上运行良好。

在我的代码示例下面（隐藏了所有播放器控件）：

＆＃13;

<!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>

＆＃13;

HTTP Live Streaming，支持各种设备

2 个答案: