我有一个网页，需要在其中放置相机的HTTP实时流。
另外，我有两个具有相同视频内容的链接：
<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>#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>我面临的问题是：我不知道如何解决支持多种设备的问题。
我不知道该怎么做：
谁面对这个问题？解决此问题的最佳方法是什么？
阿尔吉斯塔尔，谢谢！有了您的意见，我发现做到这一点的最好办法-我只使用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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句