我正在使用NGINX中内置的RTMP模块来生成HLS流。我想将该流嵌入到同一服务器上的HTML页面中。
当我在VLC上打开它时，流运行良好，但当我将页面发布到我的实时web服务器时，它会被阻止。
这是我的html页面，它非常基本，当我在本地查看时可以正确运行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<title>Camera</title>
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
<style>
body {
font-family: 'Avenir Next Var','Lucida Grande',Helvetica,sans-serif;
}
.container {
margin: 0 auto;
width:960px;
}
</style>
</head>
<body>
<div class="container">
<h3>Journalism Camera</h3>
<h4>Emerson College - Boston, MA.</h4>
<video
id="my-video"
class="video-js"
controls
autoplay="true"
muted="true"
preload="auto"
width="960"
height="540"
data-setup="{}"
>
<source src="http://localhost:8080/hls/livestream1.m3u8" type="application/x-mpegURL" />
<source src="http://localhost:8080/dash/livestream1.mpd" type="application/dash+xml" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</div>
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</body>
</html>
当我把这个html页面上传到我的实时生产服务器时，我得到了这个错误消息
video.min.js:12 VIDEOJS: ERROR: (CODE:2 MEDIA_ERR_NETWORK) HLS playlist request error at URL: http://localhost:8080/hls/livestream1.m3u8.
_t {code: 2, status: 0, message: 'HLS playlist request error at URL: http://localhost:8080/hls/livestream1.m3u8.', responseText: ''}
VM578:1 GET http://localhost:8080/hls/livestream1.m3u8 net::ERR_BLOCKED_BY_CLIENT
```
假设您的页面本地位于http://localhost:8080/，您可以只使用流的相对路径：
<source src="/hls/livestream1.m3u8" type="application/x-mpegURL" />
<source src="/dash/livestream1.mpd" type="application/dash+xml" />