Clappr似乎无法拉取视频(使用rtmp/nginx)
我自己刚刚开始使用clappr，目前正在尝试使用来自nginx服务器的rtmp流进行测试。(https://github.com/clappr/clappr/)和我尝试使用演示：(http://clappr.io/demo/)和一些基于另一个人的代码的代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" charset="utf-8"
src="http://cdn.clappr.io/latest/clappr.min.js"></script>
<script type="text/javascript" charset="utf-8"
src="http://cdn.jsdelivr.net/clappr.rtmp/latest/rtmp.min.js"></script>
<title>Test Page</title>
<script type="text/javascript" charset="utf-8">
window.onload = function() {
var player = new Clappr.Player({
source: "rtmp://10.2.10.149/cam01/test",
parentId: '#player-wrapper',
plugins: { playback: [RTMP] }
});
}
</script>
</head>
<body>
<div id="player-wrapper">
</div>
</body>
</html>但似乎无论我做什么，我都不能简单地获得我制作的html文件来正确地调用clappr，有什么东西我应该下载或做一些特殊的事情吗？根据github的页面(第一个链接)，看起来你只是应该把他们给你的代码放进去，它应该会起作用，但这也不起作用。我只是很困惑，因为似乎没有其他人有这个问题，它只是没有做任何事情，无论我把rtmp流链接放在什么示例代码中并尝试，我真的只是想在我的PC上看到一个我可以工作的工作示例，任何帮助都将不胜感激:)
编辑:我从上一篇关于这个问题的文章中获得了基本代码：https://github.com/video-dev/clappr-rtmp-plugin/issues/22
编辑2:我不完全确定问题是什么，但当我使用基于以下代码的代码时，这不再是一个问题：https://docs.peer5.com/players/hls.js/。我仍然保留这个问题，因为我相信任何没有找到这个代码并且知道如何根据他们的用例修改它的人也仍然有这个问题，我希望这个问题在某种程度上得到解决，供将来在我看过的相同地方的人参考，我监控我所有未回答的问题，所以仍然可以提供输入。
回答 1
Stack Overflow用户
发布于 2019-02-14 01:18:30
所以，他们提供的代码示例基本上是无用的垃圾，对于那些好奇的人来说，这是一个有效的示例，它引用了一个特定的文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Company Cameras</title>
<script type="text/javascript" src="//cdn.jsdelivr.net/hls.js/latest/hls.min.js">
</script>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
<style>
body {
background-color:linen;
}
h1 {
text-align: center;
}
.VidSizing {
width:100%;
height:100%;
object-fit: fill;
}
</style>
</head>
<body>
<h1>VIDEO PLAYBACK</h1>
<div id="VideoSpace" style="width:100%;height:85vh; margin:0;background-color:
#343434;">
<video id="player1" src="/hls1/test.mp4" class="VidSizing" muted playsinline
autoplay controls></video>
</div>
<script>
var potato1 = document.getElementById('player1');
potato1.play();
</script>
</body>
</html>如果在指定m3u8文件时需要HLS支持，请对脚本使用以下命令：
<script>
var isMobile = {
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
}
};
if (isMobile.iOS()) {
var potato1 = document.getElementById('player1');
potato1.play();
} else {
if (Hls.isSupported()) {
var video1 = document.getElementById('player1');
var player1 = new Hls();
player1.loadSource('/hls1/stream1.m3u8');
player1.attachMedia(video1);
player1.on(Hls.Events.MANIFEST_PARSED, function() {
video1.play();
});
}
}
</script>https://stackoverflow.com/questions/52188582
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号