我使用 Mediamtx 服务器在 http://127.0.0.1:8888/stream 上本地发布 HLS 流。我可以通过将 Chrome 直接指向该流来验证该流是否已启动。
我现在正在尝试将此流嵌入到网页中。此时我正在尝试最简单的静态网页，以消除任何其他错误源，因此我使用以下页面。
<html lang="en">
<head>
<meta charset=utf-8/>
</head>
<body>
<div id='player'>
<video width="352" height="288" src="http://127.0.0.1:8888/stream/" type="application/x-mpegURL" controls autoplay>
</video>
</div>
</body>
</html>
这显示了一个不播放的静态播放器。没有控制台输出。也许至关重要的是，我正在运行报告的 Mediamtx 服务器能够报告连接，当我将浏览器直接指向流时，我会看到已建立的连接，而当我加载静态页面时，什么也没有发生。
我尝试在 CORS 禁用模式下运行 Chrome，但我相信在这种情况下这不应该成为问题。
我需要同样的东西，我在这里找到了。 https://stackoverflow.com/a/53058765/2031172
现在，当您将此代码用于 HLS 流时，您必须拥有以下内容。 如果 URL 是 https，则流链接也必须是 https。 另外，URL 必须匹配，所以如果您有
URL = https://192.168.5.10/Stream
你的 src= 必须是
<video id='hls-example' class="video-js vjs-default-skin" width="400" height="300" controls>
<source type="application/x-mpegURL" src="https://192.168.5.10/Stream/hls/myStream.m3u8">
</video>
只需将其放在您的页面上，只要您的 URL 地址匹配，它就会进行流式传输。
<!-- CSS -->
<link href="https://vjs.zencdn.net/7.2.3/video-js.css" rel="stylesheet">
<!-- HTML -->
<video id='hls-example' class="video-js vjs-default-skin" width="400" height="300" controls>
<source type="application/x-mpegURL" src="http://www.streambox.fr/playlists/test_001/stream.m3u8">
</video>
<!-- JS code -->
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
<script src="https://vjs.zencdn.net/7.2.3/video.js"></script>
<script>
var player = videojs('hls-example');
player.play();
</script>
祝你好运
韦恩